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

【问题标题】：Custom navBar using react-native-router-flux使用 react-native-router-flux 自定义导航栏
【发布时间】：2023-04-04 23:52:01
【问题描述】：

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

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

谢谢！

【问题讨论】：

标签： react-native react-native-router-flux

【解决方案1】：

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

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

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

您的导航栏将是这样的：

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

希望这会有所帮助:)

【讨论】：

哇。那一点点让我减轻了很多痛苦和头痛。我只需要一个场景上的自定义导航栏并将其添加到那里并且它完美地工作。谢谢。
好的...所以另一个问题，我已经做到了，而且效果很好，但是导航栏组件不会随导航栏移动。它停留在页面上，并在页面滚动时显示在其他内容之上。有什么想法吗？