如何使用react-navigation的SafeAreaView并避开iPhone X上的空间？

Question

React Native推出了一段时间的 SafeAreaView 组件，它现在作为react-navigation软件包的一部分提供，它工作得很棒并解决了iPhone X上的问题，为家庭留下了空间指标（底栏）。

我能解决的一件事就是如何改变它的风格，以便它能够匹配＆＃34;页面布局的其余部分，无论我做什么，它都保持白色，并为顶部旁边的元素添加一些阴影。

以下是一些屏幕截图：

以下是我使用的代码：

<Provider store={store}>
    <SafeAreaView style={{flex: 1}} forceInset={{'top': 'never'}}>
        <View style={{flex: 1}}>
            <Navigator/>
            <NotificationsContainer/>
        </View>
    </SafeAreaView>
</Provider>

如何修改此行为和用户界面？

谢谢：）

Answer 1

您可以向其添加backgroundColor以根据屏幕的背景颜色进行更改

<SafeAreaView style={{flex: 1, backgroundColor: //Your Primary Color}} forceInset={{'top': 'never'}}>
        <View style={{flex: 1}}>
            <Navigator/>
            <NotificationsContainer/>
        </View>
    </SafeAreaView>

由于您可能使用的StackNavigator卡而出现阴影。要删除它，请尝试分别删除elevation，shadowProps for android和ios

const StackDemo = StackNavigator({
 // ...routes 
, {
  // ...props
  cardStyle: { shadowColor: 'transparent' },
});