一起使用safeAreaView时如何去除React Native StackNavigator的内部阴影

Question

我正在使用 import { SafeAreaView } from 'react-native'; 进行新的 iPhone X 开发，但我在该区域内得到了一个无聊的阴影。我怎样才能删除它？

The image is here

// Code

import { SafeAreaView } from 'react-native';

<SafeAreaView style={styles.safeArea}>
 ...
</SafeAreaView>


// Style
safeArea: {
  flex: 1,
  backgroundColor: colors.background,
},

更新： 我发现这可能与 StackNavigator 存在某种冲突（使用 headerMode: 'none'）。当我的代码中没有 safeAreaView 时，堆栈会正确隐藏 header。

更新 2： @Julien Malige，这就是我的观点。谢谢

Answer 1

我使用 React Navigation 解决了这个问题属性:

cardStyle: { shadowColor: 'transparent' }

const Routes = StackNavigator({
  Identify: { screen: IdentifyRoutes },
}, {
  headerMode: 'none',
  cardStyle: { shadowColor: 'transparent' },
});

一起使用safeAreaView时如何去除React Native StackNavigator的内部阴影

How to remove internal shadow of React Native StackNavigator when using safeAreaView together

react-native

shadow

iphone-x