React Native和react-navigation中状态栏的颜色设置

Question

我正在React Native中使用react-navigation，我已经用以下方法更改了标题颜色：

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

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

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

- Jamgreen

Answer 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>
}

- meng yan

Answer 2

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

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

- Luis Fer Garcia

Answer 3

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

- Samuli Hakoniemi

---

嗨。我正在使用 headerTintColor: 'white' 对标题进行着色，但状态栏（在标题上方）既不受 headerTintColor 的影响，也不受 headerTitleStyle 的影响。 - Jamgreen