drawerContentOptions 在 React Native 的菜单抽屉中不起作用？

Question

在我的反应本机应用程序中，我正在渲染带有一些路线的菜单抽屉。

当这条路线处于活动状态时，我想更改背景颜色，改善应用程序的视觉效果。我正在使用

drawerContentOptions

尝试执行此操作，但它不起作用。

我将整个代码放入snack

AppJs

<SafeAreaProvider>
  <NavigationContainer>
    <Drawer />
  </NavigationContainer>
</SafeAreaProvider>

抽屉导航器

  <Drawer.Navigator
    initialRouteName="Start"
    drawerType="slide"
    overlayColor="transparent"
    contentOptions={{ backgroundColor: 'red' }}
    drawerStyle={{ width: '45%', backgroundColor: '#1F1B33' }}
    contentContainerStyle={{ flex: 1 }}
    drawerContentOptions={{
      activeBackgroundColor: 'red',
      activeTintColor: 'red',
    }}
    drawerContent={(props) => <DrawerContent {...props} />}>
    <Drawer.Screen name="Navigator" component={Navigator} />
  </Drawer.Navigator>

抽屉内容

    <DrawerContentScrollView {...props}>
      <View>
        <DrawerItem
          label="Start"
          labelStyle={{ color: '#fff' }}
          onPress={() => props.navigation.navigate('Start')}
        />
        <DrawerItem
          label="Your Cart"
          labelStyle={{ color: '#fff' }}
          onPress={() => props.navigation.navigate('Cart')}
        />
        <DrawerItem
          label="Favorites"
          labelStyle={{ color: '#fff' }}
          onPress={() => props.navigation.navigate('Favorites')}
        />
        <DrawerItem
          label="Your Orders"
          labelStyle={{ color: '#fff' }}
          onPress={() => props.navigation.navigate('Orders')}
        />
      </View>
    </DrawerContentScrollView>

Stack.Navigator

    <Stack.Navigator
      screenOptions={{
        headerTransparent: true,
        headerTitle: null,
        headerTitleAlign: 'left',
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.openDrawer()}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                marginTop: 60,
              }}>
              <Image
                source={require('../assets/images/menu.png')}
                style={{ height: 30, width: 30, margin: 30 }}
              />
            </View>
          </TouchableOpacity>
        ),
      }}>
      <Stack.Screen name="Cart" component={Cart} />
      <Stack.Screen name="Favorites" component={Favorites} />
      <Stack.Screen name="Orders" component={Orders} />
      <Stack.Screen name="Start" component={Start} />
    </Stack.Navigator>

你能告诉我如何做这个工作吗？

提前谢谢您！！

Answer 1

您的 DrawerContent 没有命名函数。 这样做..

const DrawerContent = props => {
  return (
  <View>
      <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
 </View>
  );
};
export default DrawerContent