React Navigation 6.x中使用screenOptions配置抽屉样式失效的问题求助

Hey there! I totally get the confusion with the changes in React Navigation 6.x—let's get your drawer styles working properly.

The key issue here is that drawer-specific style options aren't placed directly at the top level of screenOptions anymore. Instead, you need to nest them under the drawer property within screenOptions. Let's adjust your code accordingly:

<NavigationContainer>
  <Drawer.Navigator
    initialRouteName="Home"
    screenOptions={{
      drawer: {
        activeTintColor: "blue",
        itemStyle: { marginTop: 20 },
        labelStyle: { fontSize: 30 },
      },
      drawerStyle: { backgroundColor: "purple" }
    }}
  >
    <Drawer.Screen name="Home" component={Home} />
    <Drawer.Screen name="Users" component={Users} />
  </Drawer.Navigator>
</NavigationContainer>

Let me break down the changes:

• activeTintColor, itemStyle, labelStyle: These control individual item styles, so they belong inside the drawer object under screenOptions.
• drawerStyle: This controls the overall container style of the drawer (like background color), and it sits directly under screenOptions (not inside the drawer sub-object).

If you want to customize things even further (like adding custom content or more advanced styling), you could also use the drawerContent prop on Drawer.Navigator, but for your current needs, the above adjustment should get all your styles working as expected.

内容的提问来源于stack exchange，提问作者user16625649