在本机反应中使用反应导航的问题（出现未定义的错误）

Question

我正在尝试在 react-native 中使用导航，但它给了我这个错误 TypeError: undefined is not an object (evalating 'navigation. navigate') 我很努力，但我可以'解决它。 这是我的组件代码：

function profile(props,{navigation}) {
     const {currentUser,posts} = props;
     
     //console.log({currentUser,posts})
    return (
        
        <View style={{flex:1,marginTop:40,}}>
        <View style={{flexDirection:'row', alignItems:'center', justifyContent:'center'}}>
        <View>
            <Image source={require('./Un2titled.png')} style={{height:150 , width:150 ,marginLeft:20}}/>
        </View>
        <View style={{margin:20}}>
            <Text style={{marginLeft:70, fontSize:20}}>{currentUser.name}</Text>
            <Text style={{marginLeft:15, fontSize:20,marginTop:10}}>{currentUser.email}</Text>
            <TouchableOpacity onPress={() => navigation.navigate('Profilephoto')} style={{ marginLeft:40,marginTop:10, fontSize:20,width:100,elevation: 8,backgroundColor: "#0088cc",borderRadius: 10,paddingVertical: 10,paddingHorizontal: 12}}>
                <Text style={{color:"white"}}>تعویض عکس</Text>
            </TouchableOpacity>
            <TouchableOpacity style={{ marginLeft:30,marginTop:10, fontSize:10,width:120,elevation: 8,backgroundColor: "#cc0000",borderRadius: 10,paddingVertical: 10,paddingHorizontal: 12}}>
                <Text style={{color:"white"}}>خروج از حساب</Text>
            </TouchableOpacity>
            
        </View>
        
        </View>

这是我的 app.js 代码：

import React , {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Landingscreen from './components/auth/Landing'
import registerscreen from './components/auth/Register'
import loginscreen from './components/auth/Login'
import Mainscreen from './components/main'
import Homescreen from './components/main/Home'
import Savescreen from './components/main/Save'
import ProfilePhotoscreen from './components/main/Profilephoto'
...
return(
      <Provider store={store}>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="main">
            <Stack.Screen name="mainscreen" component={Mainscreen} options={{headerShown: false}}/>
            <Stack.Screen name="save" component={Savescreen} navigation={this.props.navigation} />
            <Stack.Screen name="Home" component={Homescreen} navigation={this.props.navigation} />
            <Stack.Screen name="ProfilePhoto" component={ProfilePhotoscreen}  navigation={this.props.navigation} />
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>

Answer 1

我认为它来自于您获取 navigation 变量的方式。

我会这样做：

function profile(props) {
     const {currentUser, posts, navigation} = props;
     ...
}