android - 如何使用路由器通量将标签栏放在安卓屏幕的底部？

Question

如何将标签栏放在屏幕底部？我正在使用 react-native-router-flux 4.0.0-beta.6。

这是我的代码:

export default class RouterComponent extends Component {



 render() {
    return (
  <Router>
    <Scene key='root' hideNavBar>
      <Scene key='tabBar' tabs={true} >
        <Scene key='color' title='Color' tabBarStyle={styles.tabStyle} >
          <Scene key='blue' component={Blue} title='Blue' />
          <Scene key='gray' component={Gray} title='Gray' />
          <Scene key='red' component={Red} title='Red' />
        </Scene>

        <Scene key='number' title='Number' tabBarStyle={styles.tabStyle}>
          <Scene key='one' component={One} title='One' />
          <Scene key='two' component={Two} title='Two' />
          <Scene key='three' component={Three} title='Three' />
        </Scene>

        <Scene key='shapes' title='Shapes' tabBarStyle={styles.tabStyle}>
          <Scene key='circle' component={Circle} title='Circle' />
          <Scene key='square' component={Square} title='Square' />
          <Scene key='triangle' component={Triangle} title='Triangle' />
        </Scene>
      </Scene>
    </Scene>
  </Router>
);


}

}

const styles = StyleSheet.create({
  tabStyle: {
    borderTopWidth: 0.5,
    borderColor: '#b7b7b7',
    backgroundColor: 'white',
    opacity: 1
  }

});

我不太确定这在 android 中是否可行，因为我在网络上找不到任何解决方案。

Answer 1

<Router>
  <Scene key='root' hideNavBar>
    <Scene key='tabBar' tabs={true} tabBarPosition="bottom" >
      <Scene key='color' title='Color' tabBarStyle={styles.tabStyle} >
        <Scene key='blue' component={Blue} title='Blue' />
        <Scene key='gray' component={Gray} title='Gray' />
        <Scene key='red' component={Red} title='Red' />
      </Scene>

      <Scene key='number' title='Number' tabBarStyle={styles.tabStyle}>
        <Scene key='one' component={One} title='One' />
        <Scene key='two' component={Two} title='Two' />
        <Scene key='three' component={Three} title='Three' />
      </Scene>

      <Scene key='shapes' title='Shapes' tabBarStyle={styles.tabStyle}>
        <Scene key='circle' component={Circle} title='Circle' />
        <Scene key='square' component={Square} title='Square' />
        <Scene key='triangle' component={Triangle} title='Triangle' />
      </Scene>
    </Scene>
  </Scene>
</Router>

只需在您的代码中添加默认属性“tabBarPosition”

<Scene key='tabBar' tabs={true} tabBarPosition="bottom" >