使用 react-native-router-flux 自定义导航栏

Question

我似乎找不到任何创建您自己的导航栏组件然后将其连接到 react-native-router-flux 的完整示例。谁能帮我吗？查看 github 问题，这似乎是图书馆的一大需求。我想要做的是：

创建一个带有左侧按钮和右侧图像的新组件。
根据场景更改按钮图标，但使用右边的相同图像。
将其连接到 react-native-router-flux，以便导航栏正确显示并以与默认导航栏相同的方式跟踪用户位置。

谢谢！

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>}
    />

希望这对您有所帮助:)

使用 react-native-router-flux 自定义导航栏

Custom navBar using react-native-router-flux

react-native

react-native-router-flux