如何使用路由器助焊劑在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" >