React Native Stack+Drawer导航样式不生效问题求助

你这是踩了嵌套导航配置的典型坑——把Drawer的样式配置放错位置了。你现在给RootNavigator的navigationOptions赋值，但contentOptions其实是DrawerNavigator初始化时的核心配置项，根本不是通过组件的navigationOptions来设置的。

修正后的完整代码 #

// 保留你原有的StackNavigator定义
const MainScreenNavigator = StackNavigator({
  'Home': {
    screen: Components.HomeScreen,
    navigationOptions: ({navigation}) => ({
      header: <Components.StackHeader title='Home' navigation={navigation} />
    })
  },
  'Scan': {
    screen: Components.ScanScreen,
    navigationOptions: ({navigation}) => ({
      header: <Components.StackHeader title='Scan QR' navigation={navigation} />
    })
  },
  'LockInfo': {
    screen: Components.LockInfoScreen,
    navigationOptions: ({navigation}) => ({
      header: <Components.StackHeader title='Lock' navigation={navigation} />
    })
  },
});

// 重点：把Drawer的样式配置移到创建导航器的第二个参数里
const RootNavigator = DrawerNavigator(
  {
    Home: { screen: MainScreenNavigator },
  },
  {
    // 这里才是Drawer侧边栏的样式配置区域
    contentOptions: {
      activeBackgroundColor: '#ff5976',
      style: {
        backgroundColor: '#000000'
      }
    }
  }
);

为什么原来的写法无效？ #

navigationOptions是给单个屏幕设置导航栏标题、右侧按钮这类选项用的，而DrawerNavigator的全局样式（比如侧边栏背景、选中项高亮）必须在创建导航器时，通过第二个参数传入配置对象来定义。你之前的写法相当于给整个Drawer导航器这个"容器屏幕"设置导航选项，完全没触碰到Drawer本身的样式逻辑，所以自然不会生效。

额外补充 #

如果你的Stack导航栏还是显示默认蓝色，记得检查自定义的StackHeader组件样式——确保它的背景色、文字颜色等属性没有被默认样式覆盖。要是Drawer侧边栏的文字颜色不对，还可以在contentOptions里加activeTintColor、inactiveTintColor属性调整文字样式。

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