6

我想在查看某些页面时添加一个汉堡菜单按钮和一个出现在所有页面上的右侧按钮。react-native-router-flux 有可能吗？

更新：通过使用此代码，我能够轻松获得右侧按钮

<Scene key="home"
       component={HomePage}
       hideBackImage={true}
       ...
       rightButtonImage={HelpIcon}
       onRight={()=>{}}
       rightTitle={null}
       rightButtonIconStyle={{ width: 44, height: 44 }} />

汉堡菜单按钮被证明更加困难。导航栏上有一个drawerImage属性，但没有关于如何使该drawerImage 出现以及如何设置处理函数的其他文档。

我尝试像设置左按钮一样设置 rightButtonImage、onRight rightTitle 和 rightButtonIconStyle，但没有出现任何按钮。

更新 2：由于这个问题，我降级到 react-native-router-flux v3.34.0：https ://github.com/aksonov/react-native-router-flux/issues/1154

并将这些道具添加到我的场景中：

...
renderBackButton={()=>{ return null; }} /* Hide the back button...goofy mechanism but it works */
leftButtonImage={NavigationBurgerIcon}
onLeft={()=>{}}
leftTitle={null}
leftButtonIconStyle={{ width: 30, height: 30 }}
...
4

2 回答 2

4

您可以编写自己的导航栏以实现 100% 控制。您可以根据 NavBar 的实现来构建您的 NavBar 组件，并执行以下操作：

<Router 
  navBar={NavBar}
  ...
/>

react-native-router-flux api对此有更多详细信息。

完成后，您可以创建自定义属性以添加到您的场景中，从而为您的项目自定义各种 NavBar 行为，例如您希望如何与汉堡图标交互。

于 2016-09-13T17:41:34.830 回答
3

你可以做这样的事情。

<Router renderLeftButton={this.navBarButton}>
  <Scene .....
</Router>

功能：

navBarButton(){
return(
  <TouchableOpacity onPress={() => Actions.refresh({ key: 'drawer', open: true })}>
    <Icon name='ios-menu' size={30} />
  </TouchableOpacity>
)

}

使用react-native-vector-icons

于 2017-02-04T14:48:48.047 回答