flex:1 隐藏 <SafeAreaView>

Question

我的 react-native 屏幕看起来有点像这样：

export const JourneyResultScreen: React.FunctionComponent = () => {
  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>
        <Text>HELO</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeAreaViewContainer: { flex: 1, backgroundColor: 'red'},
  container: {  flex: 1, backgroundColor: 'pink'},
});

SafeAreaView（红色） 在除此屏幕之外的所有屏幕上都能正常工作，即使我在所有地方都使用相同的样式。它应该显示在顶部和底部。这里它只显示在底部而不是顶部。在这种情况下，它被 View（粉红色）隐藏。

如果我不将flex:1 添加到<View>，那么我根本看不到粉红色并且整个屏幕都是红色（safeAreaView 的背景颜色）。

如何修复顶部的 SafeAreaView？为什么会被 View 重叠？

Answer 1

问题出在此容器的父级之一。您使用的是 react-native 或 react-native-safe-area-context 的 SafeAreaView 吗？