react-navigation - 离开屏幕时，React 导航自定义 header 不会消失(仅限 iOS)

Question

我有一个堆栈导航器，其中一个屏幕使用自定义标题:

import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";
import { Button, View } from "react-native";

const Stack = createStackNavigator();

function ScreenA({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: "center"}}>
            <Button title="Click me" onPress={() => navigation.navigate("ScreenB")} />            
        </View>
    );
}

function ScreenB({ navigation }) {
    return (
        <View style={{ flex: 1 , justifyContent: "center"}}>
            <Button title="Click me" onPress={() => navigation.navigate("ScreenA")} />
        </View>
    );
}

function TestComp() {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="ScreenA"
                component={ScreenA}
                options={{ header: () => <View style={{ height: 160, backgroundColor: "red" }}></View> }}
            />
            <Stack.Screen name="ScreenB" component={ScreenB} />
        </Stack.Navigator>
    );
}

export default TestComp;

因此，从 ScreenB 中可以看到 ScreenA 的标题(红色条)。这不会发生在 Android 上，因为 Android 上的 header 仅在 ScreenA 上正确显示。

如何阻止 ScreenA 的标题显示在 ScreenB 上？

Answer 1

使用 <Stack.Navigator headerMode="screen"> 解决了它!