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

一、简介

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 />

2. 使用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 }} />