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

Question

我似乎找不到完整的示例来创建自己的navBar组件，然后将其连接到react-native-router-flux。谁能帮我吗？看一下github问题，似乎这是对该库的很大需求。我想要做的是:

使用左侧按钮和右侧图像创建一个新组件。

使按钮图标根据场景而变化，但在右侧使用相同的图像。

将其连接到react-native-router-flux，以便navBar正确显示并以与默认navBar相同的方式跟踪用户位置。

谢谢!

Answer 1

这是我面临的类似问题。在线上没有教程可以告诉您如何使用自定义导航栏。我找到了一种对我有用的方法。尝试这个:

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

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

您的导航栏将是这样的:

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

希望这可以帮助 :)