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计算即可<Viewstyle={[style.root,{paddingBottom: insets.bottom},]}><View style={[style.container]}><Text>安全区域显示</Text></View>
</View>

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