react-native 全面屏适配 ios Android

背景：现在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（全面屏） 模拟器上，表现一致

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 对比效果

不加状态栏高度时：

加上状态栏高度时：

PS：

安卓全面屏适配配置，还需要参考 StatusBar 设置透明（适配Android全面屏）