导航离开屏幕时，React 导航自定义标题不会消失(仅限 iOS) [英] React navigation custom header doesn't disappear when navigating away from screen (iOS only)

问题描述

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

I have a stack navigator where one of the screen uses a custom header:

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 上不会发生，其中标题仅在 ScreenA 上正确显示.

As a result, the header of ScreenA (a red bar) is visible from ScreenB. This doesn't happen on Android where the header is properly shown ONLY on ScreenA.

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

推荐答案

使用 解决了！

这篇关于导航离开屏幕时，React 导航自定义标题不会消失(仅限 iOS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！