React 导航：使用 Redux 全局应用 SafeAreaView答案

【问题标题】：React navigation: Apply SafeAreaView globally with ReduxReact 导航：使用 Redux 全局应用 SafeAreaView
【发布时间】：2018-03-15 18:02:26
【问题描述】：

我正在尝试以全局方式将SafeAreaView 应用于我的应用程序，以避免将其分别插入到每个视图中，但是当我这样做时，视图的顶部和底部会出现一个阴影，我意识到这是因为我从 index.js 应用了SafeAreaView，但是当我直接在每个视图中执行时，它按预期工作，你知道为什么还是我做错了什么？

在 index.js 中使用 SafeAreaView

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: 'white',
    shadowColor: 'transparent',
  },
});

const AppContainer = () => (
  <Provider store={store}>
    <SafeAreaView style={styles.safeArea}>
      <StatusBar backgroundColor="#EEEEEE" barStyle="dark-content" />
      <AppWithNavigationState />
    </SafeAreaView>
  </Provider>
);

在特定视图中使用 SafeAreaView

我试图移除那个阴影，但不可能。

【问题讨论】：

标签： react-native redux react-navigation iphone-x

【解决方案1】：

您需要将shadowColor: 'transparent' 添加到stackNavigator 的cardStyle，无论您在routeConfig 中使用它的任何位置

这样

cardStyle: {
    shadowColor: 'transparent'
  }

【讨论】：