如何突出显示自定义抽屉当前屏幕?

时间:2019-06-30 03:13:37

标签: react-native

我正在使用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,但是如果我尝试这样做,我不知道如何强制抽屉突出显示。

我可以弄清楚当前屏幕上使用的道具,但我不知道如何在抽屉中突出显示当前屏幕的自定义路线。

0 个答案:

没有答案