Android端React Native集成react-navigation后StatusBar无法正常工作

嘿，我知道这个问题！在react-navigation 1.x版本里，它确实会默认接管状态栏的样式，导致你手动添加的StatusBar被覆盖。结合你用的native-base和这些版本，给你几个靠谱的解决方案：

方法1：让react-navigation全局接管状态栏样式 #

在创建你的导航容器（比如StackNavigator或者DrawerNavigator）的时候，设置全局的navigationOptions，统一配置状态栏和导航栏的样式，这样就不用手动加StatusBar了：

// 假设你的MainView是这样创建的
import { StackNavigator } from 'react-navigation';

const MainView = StackNavigator(
  {
    // 你的路由配置，比如 Home: { screen: HomeScreen }
  },
  {
    navigationOptions: {
      // 设置导航栏背景色，iOS的状态栏会自动匹配这个颜色
      headerStyle: {
        backgroundColor: 'white',
      },
      // 设置导航栏文字和图标颜色
      headerTintColor: 'black',
      // Android专属：直接设置状态栏背景色
      statusBarColor: 'white',
      // 确保导航栏和状态栏间距正确
      headerStatusBarHeight: StatusBar.currentHeight,
    },
  }
);

方法2：禁用react-navigation的默认导航栏，手动控制StatusBar #

如果不想让react-navigation管状态栏，你可以把导航的headerMode设为none，这样它就不会渲染默认的导航栏和状态栏，你的手动StatusBar就能生效了：

// 创建导航时设置headerMode
const MainView = StackNavigator(
  { /* 路由配置 */ },
  {
    headerMode: 'none',
  }
);

// 调整Navigationview.js的结构，把StatusBar放在Root外面（避免native-base的Root覆盖）
render() {
  return (
    <View style={styles.container}>
      <StatusBar backgroundColor="white" barStyle="dark-content" />
      <Root>
        <MainView />
      </Root>
    </View>
  );
}

方法3：针对单个屏幕自定义状态栏 #

如果不同屏幕需要不同的状态栏样式，可以在每个屏幕组件里设置static navigationOptions：

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class HomeScreen extends Component {
  // 单独配置这个屏幕的状态栏和导航栏
  static navigationOptions = {
    headerStyle: {
      backgroundColor: 'white',
    },
    statusBarColor: 'white',
    headerTintColor: 'black',
    barStyle: 'dark-content',
  };

  render() {
    return (
      <View>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

额外注意 #

你用了native-base的<Root>组件，它内部可能也会处理状态栏样式，所以把你的<StatusBar>放在<Root>外面会更稳妥，避免被native-base的内置样式覆盖。

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