React Native抽屉导航如何修改文字颜色与高亮选中颜色

你当前已经成功将抽屉整体背景设置为#b7657b，但现有配置没有覆盖导航项的文字、选中高亮的样式控制范围，这部分样式需要通过抽屉导航的专属参数实现，具体方法如下：

• 适配主流v5/v6稳定版本
  直接在Drawer.Navigator的screenOptions中补充导航项相关的样式参数即可，无需重写整个抽屉的渲染逻辑，修改后的完整配置参考：

  <NavigationContainer>
    <Drawer.Navigator 
      drawerStyle={{
        backgroundColor: '#b7657b', // 保留原有抽屉整体背景配置
      }}
      screenOptions={{
        // 选中态导航项的文字颜色
        drawerActiveTintColor: '#ffffff',
        // 未选中态导航项的文字颜色
        drawerInactiveTintColor: '#f0e0e6',
        // 选中态导航项的高亮背景色
        drawerActiveBackgroundColor: '#9c4a61',
        // 未选中态导航项的背景，设为透明可消除默认浅底色
        drawerInactiveBackgroundColor: 'transparent',
        // 可选：自定义导航项文字的字号、字重
        drawerLabelStyle: {
          fontSize: 16,
          fontWeight: '500'
        }
      }}
      initialRouteName="Home">
        <Drawer.Screen name="Anasayfa" component={Home} />
        <Drawer.Screen name="Kullanım" component={dnm} />
        <Drawer.Screen name="Hakkımızda" component={info} />
        <Drawer.Screen name="hsc" component={hsc} />
    </Drawer.Navigator>
  </NavigationContainer>
  

• 适配v4旧版本
  上述样式参数在v4版本中需要放在独立的drawerContentOptions配置项下，参数逻辑和取值完全一致：

  <Drawer.Navigator
    drawerStyle={{ backgroundColor: '#b7657b' }}
    drawerContentOptions={{
      activeTintColor: '#fff',
      inactiveTintColor: '#f0e0e6',
      activeBackgroundColor: '#9c4a61',
      labelStyle: { fontSize: 16 }
    }}
  >
  

• 高阶自定义场景
  如果需要调整导航项的圆角、左右边距、自定义图标等更个性化的样式，可以重写drawerContent渲染方法，手动调用DrawerItem组件逐一定义每个导航项的样式，替代框架默认的导航项渲染逻辑。

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