嵌套在TabNavigator中的StackNavigator无法更改导航栏颜色问题

我之前也踩过这个坑！当把StackNavigator嵌套在TabNavigator里面时，直接在Stack的单个screen配置里设置颜色经常不生效，主要是因为导航选项的优先级问题，还有你可能混淆了tintColor和React Navigation里专门的导航栏颜色属性。

先理清关键属性 #

首先纠正一个小误区：你用的tintColor其实不是控制导航栏的正确属性，React Navigation里控制导航栏文字、返回按钮颜色的是headerTintColor，而导航栏背景色需要用headerStyle.backgroundColor来设置。

解决方案1：给StackNavigator设置全局导航样式 #

把导航栏样式统一配置在StackNavigator的全局选项里，这样所有嵌套在这个Stack里的页面都会继承这个样式，不会被外层TabNavigator干扰：

const infoNavigator = StackNavigator(
  {
    InfoMain: { screen: PFInfoMain },
    InfoDetail: { screen: PFInfoDetail }
  },
  {
    // 全局导航配置
    navigationOptions: {
      title: 'Information',
      // 导航栏背景色
      headerStyle: {
        backgroundColor: '#ffffff' // 替换成你需要的背景色
      },
      // 导航栏文字、按钮的颜色（对应你之前想设置的red）
      headerTintColor: 'red'
    }
  }
);

解决方案2：在组件内部单独配置 #

如果某个页面需要自定义导航栏样式，直接在对应的页面组件里设置static navigationOptions，这个优先级最高，肯定会生效：

class PFInfoMain extends Component {
  // 组件内部的导航配置，优先级高于Stack和Tab的配置
  static navigationOptions = {
    title: 'Information',
    headerTintColor: 'red',
    headerStyle: {
      backgroundColor: '#f5f5f5'
    }
  };

  render() {
    // ...你的组件内容
  }
}

解决方案3：处理外层TabNavigator的干扰 #

如果外层TabNavigator的配置不小心覆盖了内层Stack的导航栏样式，可以在Tab的navigationOptions里明确不设置导航栏相关属性，或者传递内层需要的样式：

const iosTabs = TabNavigator({
  Info: {
    screen: infoNavigator,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: 'Info',
      tabBarIcon: ({tintColor}) => (
        <Image source={require('../assets/home.png')} style={[styles.icon, {tintColor: tintColor}]} />
      ),
      // 可以在这里显式设置导航栏样式，确保内层Stack继承
      headerTintColor: 'red'
    })
  }
  // 其他tab项...
});

额外注意（iOS vs Android） #

Android的导航栏样式有时候需要额外适配，比如确保headerStyle里的backgroundColor正确设置，另外如果你的React Navigation版本比较旧（比如v2或更早），API可能略有不同，建议检查对应版本的文档确认属性名称。

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