<View> overlaps after navigation

问题

My react-native screen looks somewhat like this:

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'},
});

The SafeAreaView (red coloured) works well on all screens except this one, even though I am using the same styling everywhere. It is supposed to be shown at the top and bottom both. Here it is only shown at the bottom and not at the top. In this case, it is being hidden by the View (in pink).

I am afraid this could be because of how I navigate to this screen from the previous one. The navigation looks like:

App.tsx:

                <NavigationStack.Screen
                  name="Journey"
                  component={JourneyScreenNavigation}
                  options={{
                    headerShown: false,
                    ...TransitionPresets.FadeFromBottomAndroid,
                  }}
                />

export const JourneyScreenNavigation: React.FC = () => {
  return (
    <NavigationStack.Navigator initialRouteName="Journey" mode="modal">
      <NavigationStack.Screen
        name="Journey"
        component={JourneySearchScreen}
        options={{ headerShown: false }}
      />
      <NavigationStack.Screen
        name="JourneyMap"
        component={JourneyResultScreen}
        options={{
          headerShown: false,
          gestureEnabled: false,
          cardStyleInterpolator:
            CardStyleInterpolators.forFadeFromBottomAndroid,
        }}
      />
      <NavigationStack.Screen
        name="TripsNavigation"
        component={AvailableTripsNavigation}
        options={{
          gestureEnabled: false,
          headerShown: false,
          cardStyleInterpolator:
            CardStyleInterpolators.forFadeFromBottomAndroid,
        }}
      />
    </NavigationStack.Navigator>
  );
};

How can I fix the SafeAreaView at the top? Why is it being overlapped by the View?

来源：https://stackoverflow.com/questions/63437068/view-overlaps-after-navigation