2017-07-09 48 views
2

如何將標籤欄放置在屏幕底部?我正在使用react-native-router-flux 4.0.0-beta.6。如何使用路由器flux在android屏幕底部放置標籤欄?

這裏是我的代碼:

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系統儘可能我無法找到在網絡的任何解決方案。

回答

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

只是在你的代碼添加默認屬性 'tabBarPosition'

<Scene key='tabBar' tabs={true} tabBarPosition="bottom" > 
相關問題