navigation.push 不是函数。 （在\'navigation.push(\"EditProfile\")\'中，\'navigation.push\'是未定义的）（React navigation V6）

Question

我是 React Native 的新手，我正在尝试执行简单的堆栈导航。我让它在应用程序的另一部分工作（用户身份验证步骤）。一旦用户登录，我的代码就会进入另一个堆栈。这个堆栈导航器有一个嵌套的选项卡导航器，可能会导致问题？

无论哪种方式，我都无法执行从我的个人资料屏幕到编辑个人资料屏幕的推送。代码如下。

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';
import SignupScreen from './screens/SignupScreen';
import ProfileScreen from './screens/ProfileScreen';
import EditProfileScreen from './screens/EditProfileScreen';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';

const Stack = createNativeStackNavigator()

const screenOptions = {

headerShown: false

}

export const SignedOutStack = () =\> (

\<NavigationContainer\>

\<Stack.Navigator

initialRouteName="LoginScreen"

screenOptions={screenOptions}

\\>

\<Stack.Screen

name="Login"

component={LoginScreen}

/\>

\<Stack.Screen

name='SignupScreen'

component={SignupScreen}

/\>

\</Stack.Navigator\>

\</NavigationContainer\>

)

const Tab = createBottomTabNavigator();

export const SignedInStack = () =\> (

\<NavigationContainer\>

\<Tab.Navigator

screenOptions={screenOptions}\>

\<Tab.Screen name="Home" component={HomeScreen} /\>

\<Tab.Screen name="Profile" component={ProfileScreen} /\>

\</Tab.Navigator\>

\</NavigationContainer\>

)

export const ProfileStack = () =\> (

\<NavigationContainer\>

\<Stack.Navigator\>

\<Stack.Screen name="SignedInStack" component={SignedInStack} /\>

\<Stack.Screen name="EditProfile" component={EditProfileScreen} /\>

\</Stack.Navigator\>

\</NavigationContainer\>

)

我正在尝试实施推送的地方

import { View, Text, SafeAreaView, ScrollView, StyleSheet, Image, TouchableOpacity, StatusBar, Button } from 'react-native'
import React, {useState, useEffect, useContext} from 'react';
import EditProfileScreen from './EditProfileScreen';

const ProfileScreen = ({navigation}) =\> (

    // const {user, logout} = useContext(AuthContext)
    
    <SafeAreaView style={styles.wrapper}>
      <ScrollView 
        style={styles.container}
        contentContainerStyle={{justifyContent: 'center', alignItems: 'center'}}
        showsVerticalScrollIndicator = {false}
        >
            <Image style={styles.userImg} source={{uri: 'https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg'}} />
            <Text style={styles.userName}>Person</Text>
            <View style={styles.userBtnWrapper}>
        
                <Button title="Edit Profile" onPress = {() => {
                    navigation.push("EditProfile")
                    }}/>
    
            </View>
      </ScrollView>
    </SafeAreaView>

)

export default ProfileScreen

Answer 1

在实际使用导航之前，您可能需要声明一个 stackAction。

import { StackActions } from '@react-navigation/native';

……

const pushAction = StackActions.push('Profile', { user: 'Wojtek' });

navigation.dispatch(pushAction);