我想在查看某些页面时添加汉堡菜单按钮,并在所有页面上显示右侧按钮。 这可能与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 }}
...
您可以编写自己的导航栏以实现100%的控制。 您可以从NavBar 的实现中构建NavBar组件并执行以下操作:
<Router
navBar={NavBar}
...
/>
react-native-router-flux api有更多细节。
完成后,您可以创建自定义属性以添加到场景中,从而驱动自定义到项目的各种NavBar行为,例如您希望如何与汉堡包图标进行交互。
你可以这样做。
<Router renderLeftButton={this.navBarButton}>
<Scene .....
</Router>
功能:
navBarButton(){
return(
<TouchableOpacity onPress={() => Actions.refresh({ key: 'drawer', open: true })}>
<Icon name='ios-menu' size={30} />
</TouchableOpacity>
)
}