我正在使用DrawerNavigator并创建了一个customDrawer,就是这样:
const DrawerContent = (props) => (
<View style={styles.container}>
<View style={styles.customHeader}>
<Text style={{ color: colors.WHITE, fontSize: 30 }}>
Placeholder
</Text>
</View>
<View>
<DrawerItems {...props} />
</View>
<ScrollView style={styles.ScrollViewStyles}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<TouchableOpacity
style={{flexDirection: 'row', alignItems: 'center'}}
onPress={() => props.navigation.navigate('Feedback')}
>
<View style={styles.item}>
<View style={styles.iconContainer}>
<MaterialIcons name={'record-voice-over'} size={22} style={{ color: colors.GREEN }} />
</View>
<Text style={styles.label}>Feedback </Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{flexDirection: 'row', alignItems: 'center'}}
onPress={() =>
Alert.alert(
'Cerrar Sesión',
'¿Quieres salir de la aplicación?',
[
{text: 'No', onPress: () => {return null}},
{text: 'Sí', onPress: () => {
AsyncStorage.clear();
props.navigation.dispatch(resetAction);
console.log(props);
}},
],
{ cancelable: false }
)
}
>
<View style={styles.item}>
<View style={styles.iconContainer}>
<MaterialIcons name={'power-settings-new'} size={22} style={{ color: colors.GREEN }} />
</View>
<Text style={styles.label}>Cerrar Sesión</Text>
</View>
</TouchableOpacity>
</SafeAreaView>
</ScrollView>
</View>
)
这稍后会添加到我的DrawerNavigator中:
contentComponent: DrawerContent,
contentOptions: {
activeTintColor: colors.TURQUOISE,
itemsContainerStyle: {
marginVertical: 0,
},
iconContainerStyle: {
opacity: 1
}
}
当然,由于路线是定制路线,因此不会突出显示。我正在寻找一种可以使其以某种方式突出显示的方法。
我环顾四周,发现:How do I highlight the current tab using a custom drawer navigator in React Native,但我已经这样做了,它不起作用。
然后我在这里找到了reactjs方法:React Native - Identify the active screen. Drawer navigator,但是如果我尝试这样做,我不知道如何强制抽屉突出显示。
我可以弄清楚当前屏幕上使用的道具,但我不知道如何在抽屉中突出显示当前屏幕的自定义路线。