[RN] reactnavigation配合StatusBar设置状态栏

本文将为大家介绍使用reactnavigation时如何配合使用StatusBar来设置和更改状态栏样式。

本文只介绍tabnavigation的情况即2.x版本中使用createBottomTabNavigator创建的Tab导航。其它的情况在reactnavigation官网有详细的介绍，大家可以直接去看官方介绍：Different status bar configuration based on route。

先看效果：

reactnavigation官网说的也很明确，Tabnavigation的情况比较特殊，在切换Tab时，StatusBar属性是全局更改的，即Tab1设置了状态栏样式为A，Tab2设置状态栏样式为B，当点击Tab1时，Tab2的状态栏样式也会被全局的设置为A，相信大家尝试过的人已经深有体会了。

官方提供的方法是在屏幕渲染时动态的修改当前页面的StatusBar状态。

看代码：

class Screen1 extends React.Component {
  componentDidMount() {
    this._navListener = this.props.navigation.addListener('didFocus', () => {
      StatusBar.setBarStyle('light-content');
      isAndroid && StatusBar.setBackgroundColor('#6a51ae');
    });
  }

  componentWillUnmount() {
    this._navListener.remove();
  }

  ...
}

class Screen2 extends React.Component {
  componentDidMount() {
    this._navListener = this.props.navigation.addListener('didFocus', () => {
      StatusBar.setBarStyle('dark-content');
      isAndroid && StatusBar.setBackgroundColor('#ecf0f1');
    });
  }

  componentWillUnmount() {
    this._navListener.remove();
  }

  ...
}