添加屏幕适配相关的代码与第三方库。

[zgatrying]

适配设备安全区域的第三方库react-native-safearea-view

安装依赖

yarn add react-native-safe-area-view

使用

import SafeAreaView from 'react-native-safe-area-view'

<SafeAreaView>
{//...}
</SafeAreaView>

[zgatrying]

适配设计稿与实际设备设备像素比的方案

• 根据设备实际像素比转换所有组件在设计稿中的宽高。
• 根据设备实际像素比对根组件进行缩放，需要使用transform属性的scale值。内部组件使用与设计稿相同的尺寸。

[zgatrying]

ps：React Navigation already includes and uses this view starting in v1.0.0-beta.16.

补充说明：react-navigation库早在v1.0.0-beta.16版本起就使用了该库。因此通过react-navigation构建路由的应用不需要在专门安装这个库。

而且在TabNavigator组件内的Screen不需要考虑适配IPhoneX的底部，而StackNavigator组件内的Screen还是需要考虑适配iPhone X的底部，因此仍然需要手动引入react-native-safe-area-view库，将SafeAreaView组件作为Screen组件的根组件。