ReactNative中处理安全区域问题

RN原生方案不支持android系统，所以在此使用三方组件react-native-safe-area-context

1、安装插件

yarn add react-native-safe-area-context

2、安装完成后直接yarn ios可能会失败，需要先

cd ios  &&  pod install  &&  cd ..

出来再继续yarn ios就成功了

3、根组件导入

<SafeAreaProvider>
   <Index />
</SafeAreaProvider>

页面组件中

const insets = useSafeAreaInsets();

通过insets.top 和 insets.bottom来获取上下安全区域的距离，进行paddingTop和paddingBottom计算即可

<View
  style={[
    style.root,
    {paddingBottom: insets.bottom},
  ]}>
  <View style={[style.container]}>
    <Text>安全区域显示</Text>
  </View>
</View>

借鉴
https://blog.csdn.net/gitblog_00527/article/details/143940979