react-native - 如何使用 react-navigation 的 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>

如何修改此行为和 UI？

谢谢:)

Answer 1

可以在其中添加backgroundColor，根据屏幕的背景颜色进行改变

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

阴影出现是因为你可能用过StackNavigator的卡。为了移除它，请尝试分别移除 android 和 ios 的 elevation、shadowProps

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