原生基本页脚导航选项卡

Question

我是 React Native 的新手，我创建了一个带有三个按钮选项卡的页脚。我现在想知道如何通过单击按钮来呈现不同的屏幕。我的代码：

export default class Uptown extends Component {
render() {
  return (
    <Container>
      <Header>
        <Title>Uptown</Title>
      </Header>

      <Content>
        <App />
      </Content>

            <Footer>
                <FooterTab>
                  <Button>
                    Contact
                  </Button>
                  <Button>
                    Here
                  </Button>
                  <Button>
                    Me
                  </Button>
                </FooterTab>
            </Footer>
        </Container>
  );
 }
}

按下按钮时如何切换屏幕？

Answer 1

您可以添加条件渲染而不是静态<App/> 标签。您可以使用以下代码根据选定的页脚有条件地呈现。 （我使用状态变量来存储选定的页面索引。当索引更改时，引擎会自动调用渲染函数）

import First from './Home' // your first screen
import Next from './Next' // your second screen

class Updown extends Component {
   constructor(props) {
      super(props)
      this.state = {index: 0} // default screen index
   }

   switchScreen(index) {
      this.setState({index: index})
   }

   render() {
      let AppComponent = null;

      if (this.state.index == 0) {
         AppComponent = First
      } else {
         AppComponent = Second
      }

      return (
         <Container>
           <Header><Title> Header... </Title></Header>
           <Content> <AppComponent/> </Content>
           <Footer>
               <Button onPress={() => this.switchScreen(0) }> First </Button>
               <Button onPress={() => this.switchScreen(1) }> Second </Button>
           </Footer>
         </Container>
       )
   }
}

Answer 2

我认为从 native-base v2.3.1（2017 年 8 月）开始，推荐的方法是关注 documentation on React Navigation / TabNavigator。当然，这只是在你真正打算使用 TabNavigator（我这样做）和 React Navigation 的好处（我没有足够的知识来说明它们是什么）的情况下。

但是，如果您希望页脚选项卡成为应用主导航结构的一部分，而不是一个页面的临时机制，这似乎是可行的方法。

import React, { Component } from "react";
import LucyChat from "./LucyChat.js";
import JadeChat from "./JadeChat.js";
import NineChat from "./NineChat.js";
import { TabNavigator } from "react-navigation";
import { Button, Text, Icon, Footer, FooterTab } from "native-base";
export default (MainScreenNavigator = TabNavigator(
  {
    LucyChat: { screen: LucyChat },
    JadeChat: { screen: JadeChat },
    NineChat: { screen: NineChat }
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {
      return (
        <Footer>
          <FooterTab>
            <Button
              vertical
              active={props.navigationState.index === 0}
              onPress={() => props.navigation.navigate("LucyChat")}>
              <Icon name="bowtie" />
              <Text>Lucy</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 1}
              onPress={() => props.navigation.navigate("JadeChat")}>
              <Icon name="briefcase" />
              <Text>Nine</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 2}
              onPress={() => props.navigation.navigate("NineChat")}>
              <Icon name="headset" />
              <Text>Jade</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
));

Answer 3

您需要创建一个当前索引并绑定功能以从一个选项卡切换到另一个选项卡。 要做到这一点，请使用：

import First from './First' 
import Second from './Second' 

class Updown extends Component {
   constructor(props) {
      super(props)
      this.setState({currentIndex: 0}) // default screen index
   }

   switchScreen(index) {
      this.setState({currentIndex: index})
   }

   render() {
      let AppComponent = null;
//Here you can add as many tabs you need
      if (this.state.currentIndex == 0) {
         AppComponent = First
      } else {
         AppComponent = Second
      }

      return (
         <Container>
           <Header><Title> Header... </Title></Header>
           <Content> 
           {AppComponent}  // Load the component like this
          </Content>
           <Footer>
//HERE don't forget the bind function and pass the appropriate number
               <Button onPress={() => this.switchScreen.bind(this,0) }> First </Button>
               <Button onPress={() => this.switchScreen.bind(this,1) }> Second </Button>
           </Footer>
         </Container>
       )
   }
}

希望对你有帮助:)

Answer 4

我认为我们可以检查@Hossein Mobasher 代码的某些部分

import First from './Home' // your first screen
import Next from './Next' // your second screen

class Updown extends Component {
   constructor(props) {
      super(props)
      this.state = {index: 0} // default screen index
   }

   switchScreen(index) {
      this.setState({index: index})
   }

   render() {
      let AppComponent = null;

      if (this.state.index == 0) {
         AppComponent = First
      } else {
         AppComponent = Second
      }

      return (
         <Container>
           <Header><Title> Header... </Title></Header>
           <Content> 
            <AppComponent/> // you can write like this
           </Content>
           <Footer>
               <Button onPress={() => this.switchScreen(0) }> First </Button>
               <Button onPress={() => this.switchScreen(1) }> Second </Button>
           </Footer>
         </Container>
       )
   }
}