навигация в основной вкладке нижнего колонтитула по реакции-native-router-flux - PullRequest
Новая
       41

навигация в основной вкладке нижнего колонтитула по реакции-native-router-flux

1 голос
/ 24 февраля 2020

Я новичок, чтобы реагировать на родных. В моем реактивном проекте я использую встроенную базовую вкладку нижнего колонтитула, и мне нужно перемещаться между вкладками по потоку маршрутизатора, потому что проект 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>

и приложение. 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 Ответ

1 голос
/ 25 февраля 2020

Вы можете добавить следующую пропеллу tabBarComponent после объявления <Footer /> в качестве константы, например: 

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

Я также включил перекус , где вы можете экспериментировать react-native-router-flux дальше. веселиться!

...