react-navigation - 离开屏幕时，React 导航自定义标题不会消失（仅限 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 的标题（红色条）。这不会发生在仅在 ScreenA 上正确显示标题的 Android 上。

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

标签： react-navigation

Answer 1

通过使用解决它<Stack.Navigator headerMode="screen">！