Question

我在react-native-router-flux中显示tabbar时遇到了麻烦。

我正在创建这样的场景。我能够显示标签栏的第一个标签，但无法使标签栏显示在底部。谢谢你的帮助。

const scenes = Actions.create(
  <Scene key='root' tabs={true} unmountScenes
      component={connect(stateToProps)(Switch)}
      selector={props => props.isLoggedIn ? 'tabBar' : 'login'}>
    <Scene key='splash' component={Splash} title=''
      hideNavBar={false} />
    <Scene key='login' component={Login} title=''
      hideNavBar={true} />
    <Scene key='signup' component={Signup} title='Signup'
      hideNavBar={false} />
    <Scene key="tabBar" tabs icon={TabbarIcon} tabBarStyle={styles.tabBarStyle}>
      <Scene key='home' component={Home} title='Home' initial={true}
        icon={TabbarIcon} />
      <Scene key='diary' component={Diary} title='Diary'
        icon={TabbarIcon} />
      <Scene key='cabinet' component={Cabinet} title='Cabinet'
        icon={TabbarIcon} />
    </Scene>
  </Scene>
);

更新：由于我解决了这个问题，因此已关闭。谢谢你的帮助。

Answer 1

您应该从tabs以外的任何场景中删除tabBar属性。同时从icon场景中删除tabBar属性。其他一切似乎都很好。

这应该有效：

const scenes = Actions.create(
  <Scene key='root' unmountScenes
      component={connect(stateToProps)(Switch)}
      selector={props => props.isLoggedIn ? 'tabBar' : 'login'}>
    <Scene key='splash' component={Splash} title=''
      hideNavBar={false} />
    <Scene key='login' component={Login} title=''
      hideNavBar={true} />
    <Scene key='signup' component={Signup} title='Signup'
      hideNavBar={false} />
    <Scene key="tabBar" tabs tabBarStyle={styles.tabBarStyle}>
      <Scene key='home' component={Home} title='Home' initial={true}
        icon={TabbarIcon} />
      <Scene key='diary' component={Diary} title='Diary'
        icon={TabbarIcon} />
      <Scene key='cabinet' component={Cabinet} title='Cabinet'
        icon={TabbarIcon} />
    </Scene>
  </Scene>
);

react-native-router-flux tabbar没有显示

1 个答案: