其实对于 react-native 来说，官方自带的 StatusBar 已经足够使用了。
iOS 系统的状态栏是比较好设置的，Android 4.4 之后才能支持对状态栏的适配。本来 Android 是有点难处理的，但是就目前国内 Android 机器的系统版本分布来说，最低适配到 4.4 也就是 19 完全是可以的。
腾讯数据分析 的统计都已经直接从 4.4 开始统计了，所以完全没有必要支持 4.4 以下的系统了。
那么 RN 如何适配状态栏呢？
对于 RN 应用来说，基本都会使用 StackNavigation 做为整个 APP 的导航。本文也是基于这个，做的状态栏适配。
一：创建一个 StackNavigation
见代码
const StackNavigation = StackNavigator({ Root: { screen: HelloPage, }, AppNavigation: { screen: AppNavigation }, OrderDetail: { screen: OrderDetailScreen, navigationOptions: { title: "订单详情", }, });
二： 监听 screen 的切换
<AppNavigation onNavigationStateChange={_onNavigationStateChange}/>
三： 创建_onNavigationStateChange函数
getCurrentRouteName 函数，供 _onNavigationStateChange 调用
function getCurrentRouteName(navigationState) { if (!navigationState) { return null; } const route = navigationState.routes[navigationState.index]; console.log("navigationState.index=" + navigationState.index); console.log("route.routeName=" + route.routeName); // dive into nested navigators if (route.routes) { return getCurrentRouteName(route); } return route.routeName; }
function _onNavigationStateChange(prevState, currentState , action) { const currentScene = getCurrentRouteName(currentState); // const previousScene = getCurrentRouteName(prevState); StatusBar.setHidden(false); switch (currentScene) { case "ProfileScreen": case "OrderScreen": StatusBar.setHidden(false); StatusBar.setBarStyle("light-content", true); if (Platform.OS === "android") { StatusBar.setBackgroundColor(colors.topBar, true); StatusBar.setTranslucent(true); } break; default: StatusBar.setHidden(false); StatusBar.setBarStyle("dark-content", true); if (Platform.OS === "android") { StatusBar.setBackgroundColor("white", true); StatusBar.setTranslucent(true); } break; } }
_onNavigationStateChange 是主要处理逻辑的地方。
你可以在 switch 语句中根据 StackNavigator 中配置的 screen 名称，对界面的状态栏做统一的处理。
注意：由于 _onNavigationStateChange 只有在 screen 变化的时候才会有效，所以应用的第一个界面是不能在这里进行配置的。
如果需要对第一个界面的状态栏做配置，或者对任何一个界面做状态栏的设置，我建议是在 componentDidMount 中配置。如果是在 render, 那么当界面刷新的时候，会造成状态栏的闪烁。
代码格式挺乱的，自己 COPY 下来整理下，应该还是挺好懂的。
整个的思路很简单，等我闲下来了，会整理下，顺便发布 Demo 的。
