如何使用反应导航的SafeAreaView并避免iPhone X上的空间？

Question

React Native 早前推出了SafeAreaView组件，它现在已作为react-navigation软件包的一部分提供，该软件包非常出色，解决了iPhone X上的问题，为Home Indicator（底部栏）留出了空间。

我尚无法确定的一件事是如何更改其样式，以使其“匹配”其余页面布局，无论我做什么，它都保持白色，并为下一个元素添加一些阴影从顶部到它。

以下是一些屏幕截图：

这是我使用的代码：

<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分别用于Android和iOS

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