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

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

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

谢谢！

来源

2017-02-14 Shorpy

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

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

希望这有助于:)

来源

2017-03-25 12:41:28

哇。那小小的一点救了我很多痛苦和头痛。我只需要一个场景的自定义导航栏，并将其添加到那里，并且完美无瑕。谢谢。 – jakeatwork

好吧......另一个问题，我已经做到了，它工作得很好，但导航栏组件不随导航栏移动。它保持放在页面上，并在页面滚动时显示其他内容。有任何想法吗？ – jakeatwork

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

回答

相关问题