react-native - native 基本页脚导航选项卡

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>
       )
   }
}