使用React Native和react-navigation在状态栏中显示颜色

Question

我在React Native中使用react-navigation，我用

更改了标题颜色

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

它确实会更改标题栏和状态栏的背景颜色，但状态栏中的字体颜色仍为黑色。

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

Answer 1

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

Answer 2

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

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

Answer 3

我使用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>
}