我的应用程序中有一个自定义标题,其中有一个用于打开DrawerNavigator的设置按钮,当我按下此按钮时我想显示带有选项的菜单但是当我按下此按钮时总是打开在DrawerNavigator中配置的第一个屏幕而不打开只有菜单。我不知道是否需要配置别的东西。
设定:
react-navigation:1.5.2
模拟器iOS
代码:
Navigation.js
import { TabNavigator, StackNavigator, DrawerNavigator } from 'react-navigation';
import { TermsAndConditionsPage, NoticePrivacyPage, HomePage } from '../pages';
const DrawerStack = DrawerNavigator({
screen1: {
screen: TermsAndConditionsPage,
navigationOptions: {
drawerLabel: 'Terms and Contiditons',
},
},
screen2: {
screen: NoticePrivacyPage,
navigationOptions: {
drawerLabel: 'Notice of Privacy',
},
},
}, {
drawerPosition: 'right',
});
const HomeStack = StackNavigator({
HomeView: {
screen: HomePage,
navigationOptions: {
header: (<Header screen="home" /* headerPropsStyle={styles.headerHomeTab} */ />),
},
},
DrawerMenu: {
screen: DrawerStack,
navigationOptions: {
header: null,
},
}, {
initialRouteName: 'HomeView',
});
HeaderHome.js
...
render() {
// console.log('indexCity', indexCity);
return (
<Grid style={styles.gridStyle}>
<Col style={{ backgroundColor: 'transparent', paddingTop: platform === 'ios' ? 5 : 10 }}>
<ModalPicker
style={{ paddingLeft: 20, backgroundColor: 'transparent', marginTop: platform === 'ios' ? 0 : -6, maxWidth: 600 }}
selectTextStyle={{ fontSize: 15, color: 'white', fontWeight: 'bold', marginTop: -10, textAlign: 'left' }}
selectStyle={{ borderWidth: 0, borderColor: null }}
data={this.state.cities}
initValue="Location"
cancelText="Cancel"
onChange={(option) => { this.selectCity(option.id, option.name); }}
/>
</Col>
<Col style={{ backgroundColor: 'transparent', width: 40, paddingTop: platform === 'ios' ? 5 : 10 }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DrawerOpen')}
style={{ marginTop: platform === 'ios' ? -5 : -10, backgroundColor: 'transparent' }}
>
<Icon
name="ios-settings-outline"
style={{ color: 'white', fontSize: 28, alignSelf: platform === 'ios' ? 'center' : 'auto' }}
/>
</TouchableOpacity>
</Col>
</Grid>
);
}
}