React Native 中的状态栏

在实际项目中,我们常常需要根据页面的不同去修改状态栏的表现。例如:页面头部图片延伸到状态栏下并且状态栏透明;状态栏的颜色和标题栏的颜色相同;状态栏内容颜色的深浅变化。
在此之前,我写了一篇React Navigation 构建 Android 和 iOS 统一的 UI的文章,里面简单的说到了 Android 状态栏的一些设置。后来我发现并不是我想的那么简单,因此通过这篇博客进行补充,文中会更加详细的介绍状态栏相关的内容以及 React Native 项目中如何去控制状态栏,使应用在 iOS 和 Android 平台上都具有很好的表现。

示例代码我上传到了 GitHub

预备知识

在正式开始之前,我先介绍一些我目前了解下来的相关知识,为后面的内容进行一些铺垫。

iOS 中的状态栏

在 iOS 中,页面默认全屏(状态栏不占空间),状态栏内容默认是深色。因为页面全屏,所以如果我们不进行处理,内容会跑到状态栏下面去。同时,由于 iPhone X 等刘海屏手机的出现,导致状态栏的高度发生了变化,由之前的 20 变成了 34。为了解决此问题,我们可以手动给顶部组件设置 paddingTop(值根据机型判断),或者使用 SafeAreaView 组件。

在 iOS 中我们只用处理好安全区域的问题,然后根据页面的不同去设置内容的颜色深浅即可。

Android 中的状态栏

在 Android 中,页面默认非全屏(状态栏占空间),状态栏内容默认是浅色

Android 中对状态栏的支持经历了几个版本:

  • Android4.4(API 19) ~ Android 5.0(API 21):通过 FLAG_TRANSLUCENT_STATUS 设置页面为全屏且状态栏半透明(浅灰色)。
  • Android 5.0(API 21):提供了 droid:statusBarColor 属性和 setStatusBarColor 方法用来设置状态栏的颜色。
  • Android 6.0(API 23):通过 SYSTEM_UI_FLAG_LIGHT_STATUS_BAR 支持设置状态栏内容为深色

其中,如果想要设置状态栏颜色,则不能设置 FLAG_TRANSLUCENT_STATUS

在 Android 应用中,每个 Activity 都对应一个状态栏。这意味着,为一个页面设置状态栏不会对其他页面的状态栏造成影响。

React Native 中的状态栏

React Native 官方提供了 StatusBar 组件用于控制状态栏,支持设置内容深浅色,状态栏背景(Android)等。

StatusBar 可以同时添加多个,而属性则会按照加载顺序合并(后者覆盖前者)。

不同于 Android 中的状态栏,在 React Native 中状态栏是公用的,任何一个地方修改状态栏都会导致状态栏发生变化,即使切换到了其他未设置的页面。因此,我们需要在每个页面渲染时都设置一下相应的状态栏,或是在离开设置了状态栏的页面时重置状态栏。

实际案例

在了解了必要的知识后,让我们通过一个实际案例来看看我们需要做什么以及怎么做才更好。

在这个案例中,有三个页面:主页,我的,登录。其中“主页”和“我的”是两个标签页,“主页”头部有背景图片,“我的”页面顶部是蓝色,“登录”页面顶部为白色。页面效果如下图。

demo.gif

“主页”和“我的”页面使用自定义的 Header,该组件会根据当前设备,获取状态栏的高度:

const STATUS_BAR_HEIGHT = isiOS() ? (isiPhoneX() ? 34 : 20) : StatusBar.currentHeight

其中判断设备使用的下面的方法:

// iPhone X、iPhone XS
const X_WIDTH = 375;
const X_HEIGHT = 812;

// iPhone XR、iPhone XS Max
const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;

const DEVICE_SIZE = Dimensions.get('window');
const { height: D_HEIGHT, width: D_WIDTH } = DEVICE_SIZE;

export const isiOS = () => Platform.OS === 'ios'

export const isiPhoneX = () => {
  return (
    isiOS() &&
    ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
      (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT)) ||
    ((D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
      (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT))
  );
};

获取到状态栏的高度之后,根据当前是不是全屏(fullSreen 属性为 true 或者是 iOS 设备)来设置自身高度和 paddingTop,标题栏高度统一设置为 44

const headerStyle = [
  styles.header,
  (fullScreen || isiOS()) && {
    height: STATUS_BAR_HEIGHT + HEADER_HEIGHT,
    paddingTop: STATUS_BAR_HEIGHT
  }
]

“登录”页面的 Header 则是 react-navigation 默认的 Header 组件,在 Android 中标题栏高度被设置为 56

处理状态栏的问题

从上图的案例中,可以发现以下几点问题:

  1. iOS 设备中,状态栏内容的颜色显示不正确,“主页”和“我的”页面状态栏应该是浅色
  2. Android 设备中,“主页”的状态栏应该是透明的,并且图片应该延伸到状态栏下。
  3. Android 设备中,“我的”页面状态栏颜色应该也是蓝色。

为了让应用表现得更好,我们需要根据页面动态的调整状态栏。React Native 为开发者提供了 StatusBar 组件去控制状态栏。

StatusBar 组件控制状态栏

我们在“主页”中,设置状态栏内容为“浅色”,背景色为透明,translucenttrue。然后,“主页”和“我的”页面的 Header 都添加 fullScreen 属性。效果如下:

demo2.gif

从图中可以看到,因为页面路由是 js 层做的,整个应用对应一个 StatusBar,虽然“我的”和“登录”页面都没有设置状态栏,但状态栏也是透明的。

这样就有一个问题,“登录”页面其实使用默认效果即可,但是由于其他页面设置了状态栏,导致进入到“登录”页面时效果就不对了。所以,每个页面都需要设置相应的状态栏,因为状态栏可能被其他页面改变。

接下来,在“登录”页面设置状态栏为白色且内容为深色:

<StatusBar translucent={false} backgroundColor='#fff' barStyle="dark-content" />
demo3.gif

现在“登录”页面的效果就和期望的一样了,当我们从“登录”页面返回到主界面时,状态栏会切换回之前的状态,但是有一点延时。按照前面的经验,当从登录页面回来时,状态栏应该仍是白色且内容深色。因为返回时,前面的页面不会重新渲染,状态栏应该会保持当前的状态。但是状态栏却自动调整成了之前的状态,虽然有一点延时。我在 react-navigationGitHub issue 中发现有人提到,当离开 route 时,会自动的重设状态栏。我没有具体研究,但我认同这一点,这必然是某处做了此类处理。

那为什么会有延时呢?我猜测这应该是自动重置状态栏的时机导致的。我尝试增加了一个注册页面(由登录页面点击按钮进入),并设置状态栏为红色。然后,我在登录页面监听了 willFocusdidFocus 事件,分别在事件的处理函数中,将状态栏设置为白色。结果是,在 willFocus 中处理是我们期望的结果,而 didFocus 中处理和默认不处理时是一样的。

demo4.gif

到这里,我们基本可以得出一个结论:如果我们要在 app 中调整状态栏,稳妥的做法是在每一个页面 willFocus 时设置其相应的状态栏,除非能确保前一个页面的状态栏和自身相同。

因为这个功能十分通用,所以我们可以通过一个高阶组件来完成这件事:

import React from 'react'
import hoistNonReactStatics from 'hoist-non-react-statics'
import { StatusBar } from 'react-native'

import { isAndroid } from '../../utils/device'

export const setStatusBar = (statusbarProps = {}) => WrappedComponent => {
  class Component extends React.PureComponent {
    constructor(props) {
      super(props)
      this._navListener = props.navigation.addListener('willFocus', this._setStatusBar)
    }

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

    _setStatusBar = () => {
      const {
        barStyle = "dark-content",
        backgroundColor = '#fff',
        translucent = false
      } = statusbarProps
      StatusBar.setBarStyle(barStyle)
      if (isAndroid()) {
        StatusBar.setTranslucent(translucent)
        StatusBar.setBackgroundColor(backgroundColor);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />
    }
  }

  return hoistNonReactStatics(Component, WrappedComponent);
}

通过装饰器的方式使用也十分简单:

@setStatusBar({
  barStyle: 'light-content',
  translucent: true,
  backgroundColor: 'transparent'
})
export default class Home extends React.PureComponent {
 ... 
}

设置 Android 全屏且状态栏透明

除了在 js 层通过 StatusBar 组件设置状态栏的颜色、半透明等,我们也可以先将 Android 的状态栏设置为全屏且状态栏透明,这样 Android 的表现就和 iOS 一样,可以统一的去处理。

MainActivity.java 中添加下面的代码,可以设置全屏且状态栏透明:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    View decorView = getWindow().getDecorView();
    decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    if (Build.VERSION.SDK_INT >= 21) {
        getWindow().setStatusBarColor(Color.TRANSPARENT);
    }
}

设置完成后的效果如下图(没有处理 paddingTop)。

demo5.gif

现在 Android 状态栏的表现就和 iOS 一样了,处理的时候统一按照 iOS 的处理逻辑即可,只是在 Header 的高度以及 paddingTop 的计算上不同。

此外,还需要注意 react-native 的 Header 没有处理 Android 全屏的情况,因此我们需要在 Android 平台下修改 headerStyle:

defaultNavigationOptions: {
  headerStyle: {
    ...Platform.OS === 'android' && {
      height: StatusBar.currentHeight + 44,
      paddingTop: StatusBar.currentHeight
    }
  }
}

总结

React Native 中想要让状态栏表现得更好还是需要做一些工作的。现在看来其实使用 StatusBar 组件更加的容易一点,因为即使在 Android 原生层面设置了全屏和透明状态栏,最后还是需要根据页面去设置状态栏内容的颜色,所以还不许统一的在 js 层去做,通过高阶组件的方式也不是很麻烦。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 155,348评论 4 355
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 65,906评论 1 283
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,191评论 0 235
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,295评论 0 201
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,606评论 3 283
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,107评论 1 202
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,507评论 2 305
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,217评论 0 193
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,848评论 1 234
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,183评论 2 238
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,734评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,084评论 2 247
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,608评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,921评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,627评论 0 190
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,103评论 2 261
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,054评论 2 257

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,590评论 4 59
  • oracle官网教程 概述 背景 例子 使用Lambda表达式改进代码 总结 概述 Lambda表达式是Java8...
    夜不见月光的蓝阅读 348评论 0 0
  • 游于喧嚣尘世之中, 看人来人往爱恨悲苦, 若是一人在旅途, 爱的人是否会心中挂念? 还是早已忘了有我的存在? 我沉...
    南山桂子阅读 174评论 0 0
  • 距离上次写东西,已经是快两个月了,时光匆匆如流水啊。感觉做Android开发要学的东西真的是太多了,首先Java得...
    leilifengxingmw阅读 83评论 0 0
  • Week 4 精读笔记 psychiatry n. the branch of medicine concerne...
    家懿阅读 227评论 0 1