使用 React Native 和 react-navigation 在状态栏中着色答案

【问题标题】：Color in status bar with React Native and react-navigation使用 React Native 和 react-navigation 在状态栏中着色
【发布时间】：2017-05-22 16:39:19
【问题描述】：

我在 React Native 中使用 react-navigation，并且我已经更改了标题颜色

const MyScreenNavigator = StackNavigator({
  ...
}, {
  navigationOptions: {
    headerStyle: {
      backgroundColor: 'blue',
    },
    headerTintColor: 'white'
  }
});

它确实改变了标题和状态栏的背景颜色，但状态栏中的字体颜色仍然是黑色。

如何自定义状态栏的字体颜色？

【问题讨论】：

标签： javascript node.js reactjs react-native react-navigation

【解决方案1】：

我用StatusBar

const RootNavigator = StackNavigator({
...
}, {
  initialRouteName: 'Home',
  navigationOptions: {
    header: <Header />
  }
});

header.js

import { StatusBar } from 'react-native';
export default class Header extends Component<{}> {
  <View>
    <StatusBar backgroundColor="#fff" />
    ...
  </View>
}

【讨论】：

【解决方案2】：

API 和文档仍然经常更改，但要设置 StackNavigator 的标题样式，请使用 headerTitleStyle: { color: 'white' }。 (https://reactnavigation.org/docs/navigators/stack#headerTitleStyle)

【讨论】：

嗨。我用headerTintColor: 'white' 为标题着色，但状态栏（标题上方）不受headerTintColor 和headerTitleStyle 的影响

【解决方案3】：

我相信您现在无法使用 navigationOptions 更改状态栏背景颜色。您应该在组件中使用 StatusBar：

<StatusBar
    barStyle="light-content"
    backgroundColor='blue'
/>

【讨论】：