我正在使用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的新手。预先感谢。
我想出了一种方法，但是我想知道是否有比我想出的更好/更简单的方法。我添加了一些挂钩（useEffect，useState）并修改了我的navigationToScreen函数。这是我的代码。如果可以帮助您，请对此表示赞成。如果您提供的解决方案比我的更好，我将使其成为公认的答案：
const DrawerMenu = (props) => {
let activeIndex = props.navigation.state.index;
let activeRouteName = props.navigation.state.routes[activeIndex].routeName;
const [activeRoute, setActiveRoute] = useState('');
useEffect(() => {
setActiveRoute(activeRouteName);
}, [activeRouteName, activeRoute]);
const navigateToScreen = (route) => () => {
if (activeRouteName === route){
return props.navigation.closeDrawer();
}
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={activeRouteName === "Search Locations" ? styles.activeIcon : styles.icon}
size={30}
/>
<Text style={activeRouteName === "Search Locations" ? styles.activeLabel : styles.label}>
Search Locations
</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.rowContainer}>
<TouchableOpacity onPress={navigateToScreen('About')}>
<View style={styles.row}>
<MaterialIcons
name='info-outline'
style={activeRouteName === "About" ? styles.activeIcon : styles.icon}
size={30}
/>
<Text style={activeRouteName === "About" ? styles.activeLabel : styles.label}>
About
</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.rowContainer}>
<TouchableOpacity onPress={navigateToScreen('Favorites')}>
<View style={styles.row}>
<MaterialIcons
name='favorite-border'
style={activeRouteName === "Favorites" ? styles.activeIcon : styles.icon}
size={30}
/>
<Text style={activeRouteName === "Favorites" ? styles.activeLabel : styles.label}>
Favorites
</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.rowContainer}>
<TouchableOpacity onPress={navigateToScreen('Profile')}>
<View style={styles.row}>
<MaterialIcons
name='person-outline'
style={activeRouteName === "Profile" ? styles.activeIcon : styles.icon}
size={32}
/>
<Text style={activeRouteName === "Profile" ? styles.activeLabel : styles.label}>
User Profile
</Text>
</View>
</TouchableOpacity>
</View>
</ScrollView>
)
};
const styles = StyleSheet.create({
root: {
marginTop: 20,
},
row: {
flexDirection: 'row',
paddingTop: 16,
paddingBottom: 16,
alignItems: 'center',
justifyContent: 'flex-start'
},
icon: {
marginRight: 25,
color: '#fff',
padding: 2,
},
activeIcon: {
marginRight: 25,
color: colors.accent,
padding: 2,
},
label: {
fontSize: 20,
color: '#fff',
},
activeLabel: {
fontSize: 20,
color: colors.accent,
},
rowContainer: {
marginHorizontal: 16,
}
});
export default DrawerMenu;