我正在使用React Navigation库。我已经编写了一个自定义抽屉菜单并将其添加到我的导航器的contentComponent配置中。我不知道如何从自定义菜单中确定哪个页面/屏幕处于活动状态。这是我的DrawerNavigator代码:
const DrawerNavigator = createDrawerNavigator({
"Search Locations": {
screen: SearchLocationsScreen,
},
"About": {
screen: AboutScreen
},
"Favorites": {
screen: FavoritesScreen
},
"Sign In": {
screen: SignIn
},
}, {
contentComponent: props => <CustomDrawerComponent {...props} />
});
值得注意的是,我的DrawerNavigator嵌套在StackNavigator中。我将导航选项导出到一个单独的文件,如下所示:
export default (navigation) => {
const {state} = navigation;
let navOptions = {};
if(state.index === 0){
navOptions.headerRight = (
<TouchableOpacity>
<MaterialIcons
name="my-location"
size={32}
color="#fff"
style={{paddingRight: 10}} />
</TouchableOpacity>
)
}
if (state.isDrawerOpen){
navOptions.headerLeft = (
<>
<StatusBar barStyle='light-content'/>
<TouchableOpacity onPress={() => {
navigation.dispatch(DrawerActions.toggleDrawer())
}}>
<Ionicons name="ios-close" style={styles.menuClose} size={38} color={'#fff'}/>
</TouchableOpacity>
</>
)
} else {
navOptions.headerLeft = (
<>
<StatusBar barStyle='light-content'/>
<TouchableOpacity onPress={() => {
navigation.dispatch(DrawerActions.toggleDrawer())
}}>
<Ionicons name="ios-menu" style={styles.menuOpen} size={32} color={'#fff'}/>
</TouchableOpacity>
</>
)
}
return navOptions;
};
我像这样分配这些选项:
const MainStackNavigator = createStackNavigator({
DrawerNavigator: {
screen: DrawerNavigator,
navigationOptions: ({navigation}) => configureDrawerOptions(navigation)
}
}, {
defaultNavigationOptions: configureDefaultStackNavOptions
});
我的自定义 DrawerMenu 如下所示:
const DrawerMenu = (props) => {
// let routes = props.navigation.state.routes;
const navigateToScreen = (route) => () => {
const navAction = NavigationActions.navigate({
routeName: route
});
props.navigation.dispatch(navAction);
};
return (
<ScrollView style={styles.root}>
<View style={styles.rowContainer}>
<TouchableOpacity onPress={navigateToScreen('Search Locations')}>
<View style={styles.row}>
<MaterialIcons name='location-searching' style={styles.icon} size={30}/>
<Text style={styles.label}>Search Locations</Text>
</View>
</TouchableOpacity>
</View>
<View {...props} style={styles.rowContainer}>
<TouchableOpacity onPress={navigateToScreen('About')}>
<View style={styles.row}>
<MaterialIcons name='info-outline' style={styles.icon} size={30}/>
<Text style={styles.label}>About</Text>
</View>
</TouchableOpacity>
</View>
<View {...props} style={styles.rowContainer}>
<TouchableOpacity onPress={navigateToScreen('Favorites')}>
<View style={styles.row}>
<MaterialIcons name='favorite-border' style={styles.icon} size={30}/>
<Text style={styles.label}>Favorites</Text>
</View>
</TouchableOpacity>
</View>
<View {...props} style={styles.rowContainer}>
<TouchableOpacity onPress={navigateToScreen('Sign In')}>
<View style={styles.row}>
<Ionicons name='md-log-in' style={styles.icon} size={30}/>
<Text style={styles.label}>Sign In</Text>
</View>
</TouchableOpacity>
</View>
</ScrollView>
)
};
如果我选择不同的页面,我可以很好地导航(如果我在“搜索位置”页面上并且我想转到“登录”页面,一切都按预期工作)。但是,如果我在“搜索位置”页面上并单击“搜索位置”菜单项,我只想关闭抽屉。我还想为活动页面的图标/标签着色。我的问题是,从DrawerMenu.js文件中,我不知道如何确定我当前在哪个页面上执行此操作。
我是否正确执行此操作?我是 React Native 的新手。提前致谢。