react-native-router-flux 标签栏位置顶部

Question

如何改变tabbar的位置？我希望对于许多应用程序，需要在 top 上有一个标签栏，而不是在底部...

我期待这样的事情：

<Router createReducer={reducerCreate}>
    <Scene key="somekey" tabs={true} 
        tabBarStyle={{position:'top'}}>         <==  How do I do this?

             # My tabs here as scenes

    </Scene>
</Router>

Answer 1

因为tabBar是有绝对定位的。您必须设置 top 属性。

tabBarStyle={{top:0}}

您必须考虑状态栏的高度和导航栏的高度，以便正确定位。

p.s：不知道大家有没有意识到，但是要避免使用inline-styles。如果只是为了举例，请忽略我的建议。 :P

Answer 2

您也可以使用属性:

tabBarPosition='top'

<Scene tabBarPosition='top' tabs={true} key="myTabBar" >

查看文档 https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#tabs-tabs-or-scene-tabs

react-native-router-flux 标签栏位置顶部

react-native-router-flux tabbar position top

tabbar

react-native

react-native-router-flux