react-native 全面屏适配 ios Android

待我称王封你为后i 2023-02-10 05:20 134阅读 0赞

> 背景：现在ios和android都有五花八门的全面屏，但同时用户里也依然有很多使用非全面屏手机的用户  
> 在使用react-native进行原生开发时，如何进行全面屏适配呢？

### 目录 ###

*   *   *  1.ios全面屏适配
         *   *  1.1 SafeAreaView
             *  1.2 SafeAreaView使用方法
             *  1.3 效果
         *  2.android全面屏适配
         *   *  2.1一种方案 StatusBar
             *  2.2 对比效果

--------------------

### 1.ios全面屏适配 ###

#### 1.1 SafeAreaView ####

*  SafeAreaView是react-native提供的组件，目前仅支持 iOS 设备以及 iOS 11 或更高版本。
 *  目的是在一个“安全”的可视区域内渲染内容。避免内容渲染到不可见的“刘海”范围内，
 *  SafeAreaView只对ios设备生效。

#### 1.2 SafeAreaView使用方法 ####

将原有视图用SafeAreaView包起来，同时必须设置flex:1，以及背景颜色backgroundColor

<SafeAreaView style={ { flex: 1, backgroundColor: '#fff'}}>
      <View style={ {  flex: 1 }}>
        <Text>Hello World!</Text>
      </View>
    </SafeAreaView>

这样，在“刘海”屏手机里，它会在“刘海”以下的部分渲染内容。

#### 1.3 效果 ####

这里我自己实现的Header，在iphone8（非全面屏） 和 iphone11（全面屏） 模拟器上，表现一致  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 1]

### 2.android全面屏适配 ###

#### 2.1一种方案 StatusBar ####

*  SafeAreaView对Android无效，那么怎么在安卓手机实现全面屏适配呢？
 *  使用Status提供的一个属性`StatusBar.currentHeight`可以获取到当前手机的状态栏高度，即“刘海”的高度。
 *  将状态栏高度加到原有的高度上，就能够实现不被“刘海”遮挡的效果。
 *  这里只是一种方法，还有其他的方法可用，看实际使用场景进行选择

在安卓系统中，要加上状态栏高度得到HEIGHT，给组件使用

const statusBarHeight = StatusBar.currentHeight;
    const HEIGHT = Platform.OS === 'ios' ? 50:50+statusBarHeight;

#### 2.2 对比效果 ####

不加状态栏高度时：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 2]  
加上状态栏高度时：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 3]  
PS：  
安卓全面屏适配配置，还需要参考 [StatusBar 设置透明（适配Android全面屏）][StatusBar _Android]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520145711893.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200520145746196.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200520151311748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200520151405922.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx,size_16,color_FFFFFF,t_70
[StatusBar _Android]: https://blog.csdn.net/qq_33466661/article/details/105143461