通过 react-native-router-flux 在本机基础页脚选项卡中导航

Question

我是 React Native 的新手。在我的 React 项目中，我使用本机基础页脚选项卡，我需要通过路由器通量在选项卡之间导航，因为通过路由器通量初始化项目。有人能帮我吗？谢谢。

<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

您可以在将 <Footer /> 声明为常量后添加以下属性 tabBarComponent，如下所示：

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

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