自定义navBar使用react-native-router-flux

时间:2017-02-14 19:17:25

标签: react-native react-native-router-flux

我似乎无法找到任何完整的示例来创建自己的navBar组件,然后将其连接到background-size: 100%。谁能帮我吗?看看github问题,似乎这对图书馆来说是一个很大的需求。我要做的是:

  • 使用左按钮和右侧图像创建一个新组件。
  • 按钮图标会根据场景而改变,但使用相同的图像。
  • 将其连接到react-native-router-flux,以便navBar正确显示并以与默认navBar相同的方式跟踪用户位置。

谢谢!

1 个答案:

答案 0 :(得分:11)

这是我遇到的类似问题。没有在线教程告诉您如何使用自定义导航栏。我找到了一种适合我的方法。试试这个:

<Router navBar = {MainNavBar}>
    <Scene key = "home" component = {HomeScreenContainer} title = "Home" initial = {true} />
</Router>

这是您定义场景的主Root组件的代码。您必须在路由器或任何需要导航栏的场景中传递导航栏组件。

你的Navbar会是这样的:

<NavigationBar      
    leftComponent = {<TouchableOpacity><Icon name="sidebar" /></TouchableOpacity>}
    centerComponent = {<Title>{props.title}</Title>}
    />

希望这有帮助:)