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

Posted 2023-03-15

【中文标题】react-native-router-flux 在本机基本页脚选项卡中导航

【英文标题】：navigation in native base footer tab by react-native-router-flux

【发布时间】：2020-02-24 13:37:56

【问题描述】：

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

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

【参考方案1】：

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

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

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