我已经使用 Login.js 作为路由组件启动了 Navigtor。登录时,我使用推送方法导航到显示滑动菜单的仪表板屏幕。我已经使用react-native-drawer-layout实现了滑动菜单。 Dashbord.js 是另一个文件。现在我想控制导航栏左侧按钮。 提前致谢。
最佳答案
为此,您必须在 App.js 中管理每个路由的不同情况
App.js
const NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
switch (route.id) {
case 'Dashboard':
return (
<TouchableOpacity
style={styles.navBarLeftButton}
onPress={() => {_emitter.emit('openMenu')}}>
<Icon name='menu' size={25} color={'white'} />
</TouchableOpacity>
)
case 'Page1':
return (
<TouchableOpacity
style={styles.navBarLeftButton}
onPress={() => {_emitter.emit('openMenu')}}>
<Icon name='menu' size={25} color={'white'} />
case 'Page2':
return (
<TouchableOpacity
style={styles.navBarLeftButton}
onPress={() => {navigator.pop()}}>
<Icon name='arrow-back' size={25} color={'white'} /> //you can change icon as your requirements
</TouchableOpacity>
)
default:
return (
<TouchableOpacity
style={styles.navBarLeftButton}
onPress={() => {_emitter.emit('back')}}>
<Icon name='chevron-left' size={25} color={'white'} />
</TouchableOpacity>
)
}
},
RightButton(route, navigator, index, navState) {
return (
<TouchableOpacity
style={styles.navBarRightButton}>
<Icon name='more-vert' size={25} color={'white'} />
</TouchableOpacity>
)
},
Title(route, navigator, index, navState) {
return (
<Text style={[styles.navBarText, styles.navBarTitleText]}>
{route.title}
</Text>
)
}
}
You can able to change
left button
icon as I have addedmenu
icon on Page1 andarrow-back
icon on Page2.Refer to this link for full implementation of Drawer in react-native: Navigation Drawer
关于javascript - 如何在运行时更改 react native 中的导航器左按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40671412/