React Native系列(三)- 状态栏定制(沉浸式状态栏)

Yukino 886 2022-09-14

接下来几篇内容信息密度不会太高,会是一些简单的小功能,这个系列的内容、顺序纯粹取决于我做项目时遇到的问题

一、简介

React native提供了StatusBar组件用于覆盖状态栏样式,在结合Navigation使用时,每个Screen都可以放置StatusBar组件,并且后放置的会覆盖先放置的,所以要结合实际场景合理的设置,如果只有一种样式就只用在App.tsx中放一个全局的即可,多种的话,我目前手上的项目就是两种,但还是每个页面都放置了StatusBar组件,我起初想在App.tsx里放一个全局的,然后在某些页面更改为特定的,然后切换路由的时候组件里没有StatusBar组件,应该就会用App.tsx的,但实际上App.tsx的StatusBar被覆盖之后就之前不会生效了。

二、常见需求

1. 更改背景颜色

StatusBar提供了一个backgroundColor参数用于更改状态栏的背景颜色:

<StatusBar backgroundColor='#000' />

2. 更改字体颜色

字体颜色barStyle可供更改的内容相比背景颜色就要局限的多,只提供明light-content、暗dark-content两种选择:

<StatusBar barStyle='light-content' />

3. 透明(沉浸式)状态栏

backgroundColor属性本身是支持透明度的,但如果希望状态栏下渲染内容(如:图片)则需要用到translucent属性:

<StatusBar translucent />

指定状态栏是否透明。设置为 true 时,应用会延伸到状态栏之下绘制(即所谓“沉浸式”——被状态栏遮住一部分)。常和带有半透明背景色的状态栏搭配使用。

4. 隐藏状态栏

在某些场景会需要隐藏状态栏(如:扫码),要实现这点有两种方式:

  1. 使用StatusBar的hidden属性(推荐):
<StatusBar hidden />
  1. 使用React navigation的statusBarHidden属性,这种方式需要配置Screen options或者 Navigator screenOptions中的statusBarHidden属性(不推荐这种方式,Navigation应该是每个Screen公用的一个StatusBar,在切换页面的时候效果会比较奇怪):
<BaseStack.Screen
  name='Test'
  component={Test}
  options={{ statusBarHidden: true }}
/>

<BaseStack.Navigator screenOptions={{ statusBarHidden: true }} />