React Native Navigation - 自动返回上一屏幕，无需调用 goBack() 方法

Question

我使用

createStackNavigator

进行正常导航，使用

createMaterialTopTabNavigator

进行选项卡导航

嵌套导航的行为很奇怪。我在

App.tsx

中有一个 StackNavigator，其中包含

ProfileHome.tsx

。

ProfileHome.tsx

包含具有四个屏幕的选项卡导航。我想从

PastWorkDetail.tsx

 导航到 

PastWork.tsx (Tab)

屏幕，它是 StackNavigator 的一部分

每当我从

PastWork (Tab)

导航到

PastWorkDetail

时，屏幕

PastWorkDetail

就会出现并自动重定向到上一个屏幕，即

PastWork (Tab)

App.tsx

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import React, { useState } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { RootStackParamList } from "./navigation/types";
import LoginHome from "./screens/login/LoginHome";
import SplashScreen from "./screens/login/SplashScreen";
import SocialMediaSelectPage from "./screens/preference/SocialMediaSelectPage";
import PastWorkDetail from "./screens/profile/PastWorkDetail";
import ProfileHome from "./screens/profile/ProfileHome";

const RootStack = createStackNavigator<RootStackParamList>();

const App = () => {
    return (
        <SafeAreaProvider>
            <NavigationContainer>
                <RootStack.Navigator
                    initialRouteName="LoginHome">
                    <RootStack.Screen name="LoginHome" component={LoginHome} />                        
                    <RootStack.Screen name="SocialMediaSelectPage" component={SocialMediaSelectPage}/>
                    <RootStack.Screen name="ProfileHome" component={ProfileHome} />
                    <RootStack.Screen name="PastWorkDetail" component={PastWorkDetail} />
                    <RootStack.Screen name="Test" component={Test} />
                </RootStack.Navigator>
            </NavigationContainer>
        </SafeAreaProvider>
    );
};

export default App;

ProfileHome.tsx

import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import React from "react";
import { View } from "react-native";
import HeaderProfile from "../../components/header/HeaderProfile";
import PastWork from "./PastWork";
import Preferences from "./Preferences";
import Profile from "./Profile";
import TopTabBar from "./shared/TopTabBar";
import Stats from "./Stats";

interface TabItem {
    name: string;
    component: React.ComponentType<any>;
}

const tabs: TabItem[] = [
    { name: "Profile", component: Profile },
    { name: "Stats", component: Stats },
    { name: "Preferences", component: Preferences },
    { name: "Pastwork", component: PastWork },
];

const ProfileHome = () => {
    const Tab = createMaterialTopTabNavigator();

    return (
        <View style={styles.container}>
            <Tab.Navigator backBehavior="history" nitialRouteName="Profile" tabBar={(props) => <TopTabBar {...props} />}>
                {
                    // Populating tabs
                    tabs.map((item: TabItem, index: number) => {
                        return (
                            <Tab.Screenkey={index} name={item.name} component={item.component}
                                options={{
                                    tabBarLabel: item.name,
                                }}
                            />
                        );
                    })
                }
            </Tab.Navigator>
        </View>
    );
};

export default ProfileHome;

过去的工作.tsx

import { useNavigation } from "@react-navigation/native";
import React from "react";
import { Image, ImageSourcePropType, StyleSheet, View } from "react-native";

const images = [
    require("../../assets/images/pastWork1.jpeg"),
    require("../../assets/images/pastWork2.png")
];

const PastWork = () => {
    const navigation = useNavigation();
    const onPress = () => {
        navigation.navigate("PastWorkDetail");
    };

    return (
        <View style={styles.container}>
            <View style={{ width: Utils.getWidth(45) }}>
                {
                    images.map((item, index) => {
                        return (
                            <ImageView key={index} source={item} onPress={onPress} />
                        );
                    })
                }
            </View>
        </View>
    );
};

export default PastWork;

过去工作详细信息.tsx

import React from "react";
import { StyleSheet, View } from "react-native";
import Header from "../../components/header/Header";

const PastWorkDetail = () => {
    return (
        <View style={styles.container}>
            <Header name="Pastwork Info" />
        </View>
    );
};

export default PastWorkDetail;

Answer 1

我也遇到同样的问题。

在

animationEnabled={true}

的 screenOptions 中设置

Stack.Navigator

解决了我的问题。