通过车辙通量在本地基础页脚选项卡中导航

Question

我在react native中是新的，在我的react项目中，我使用本地基本页脚选项卡，并且我需要通过路由器流量在选项卡之间导航，因为通过路由器流量的init项目可以帮助我，谢谢。

 <Footer>
                <FooterTab style={{ backgroundColor: '#FB8700' }}>
                    <Button vertical onPress={() => { this.setState({searchactive:true,addactive:false,settingactive:false,Selecteditem:'Search'}) }} active={this.state.searchactive} >
                        <Icon name="search" type='Ionicons' style={tabsstyle.IconS} />
                        <Text style={tabsstyle.TextS}>search</Text>
                    </Button>
                    <Button vertical onPress={() => { Actions.add(),this.setState({addactive:true,searchactive:false,settingactive:false,Selecteditem:'Add'}) }} active={this.state.addactive} >
                        <Icon name="person-add" type='Ionicons' style={tabsstyle.IconS} />
                        <Text style={tabsstyle.TextS}>add</Text>
                    </Button>
                    <Button vertical onPress={() => { this.setState({settingactive:true,addactive:false,searchactive:false,Selecteditem:'Setting'}) }} active={this.state.settingactive}>
                        <Icon name="settings" style={tabsstyle.IconS} />
                        <Text style={tabsstyle.TextS}>setting</Text>
                    </Button>
                </FooterTab>
            </Footer>

和app.js代码

      <Router hideNavBar="true">
    <Scene key="root">
      <Scene key="index" component={index} hideNavBar={true} initial={true} />
      <Scene key="login" component={login} title="" />
      <Scene key="register" component={register} title="" />
      <Scene key="forgetpass" component={forgetpass} title="" />
      <Scene key="tabs" component={tabs} hideNavBar={true} title="" />
      <Scene
        key="tabbar"
        tabs={true}
        tabBarStyle={{ backgroundColor: '#FFFFFF' }}
      >
          <Scene key="search" component={search} hideNavBar={true} title="" />
          <Scene key="add" component={add} hideNavBar={true} title="" />
          <Scene key="setting" component={setting} hideNavBar={true} title="" />
      </Scene>
    </Scene>

  </Router>

Answer 1

您可以在将tabBarComponent声明为常量之后，像下面这样添加以下属性<Footer />：

<Scene
  key="tabbar"
  tabs={true}
  tabBarStyle={{ backgroundColor: '#FFFFFF' }}
  tabBarComponent={footer} // <-- this
>

我还提供了snack，您可以在其中进一步尝试react-native-router-flux。玩得开心！