React Native TypeError：无法读取undefined的navigate属性问题求助

问题场景 #

在MacOS系统下使用VSCode开发React Native应用，点击Start.tsx页面的TouchableOpacity按钮尝试跳转至Logandsignin.tsx页面时，持续报错：Cannot read property 'navigate' of undefined。

相关代码 #

Start.tsx #

import React from 'react';
import { View, Image, Text, StyleSheet, Dimensions, TouchableOpacity } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '../../App';

const { width, height } = Dimensions.get('window');

type StartScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Start'>;

type Props = {
  navigation: StartScreenNavigationProp;
};

const Start: React.FC<Props> = ({ navigation }) => {
  console.log('Received props:', navigation);

  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <Image
          source={require('../image/start.png')}
          style={styles.image}
        />
      </View>

      <View style={styles.textContainer}>
        <Text style={styles.text}>Find</Text>
        <Text style={styles.text}>Your</Text>
        <Text style={styles.text2}>Fit</Text>
        <Text style={styles.text2}>Pin</Text>
      </View>

      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          if (navigation) {
            navigation.navigate('Logandsignin');
          } else {
            console.error('Navigation prop is undefined');
          }
        }}
      >
        <Text style={styles.buttontext}>시작하기</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ffffff',
  },
  imageContainer: {
    flex: 3,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: width,
    resizeMode: 'cover',
  },
  textContainer: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
    paddingLeft: width * 0.08,
  },
  text: {
    fontSize: width * 0.08,
    color: '#9D9D9D',
  },
  text2: {
    fontSize: width * 0.08,
    color: '#000000',
  },
  button: {
    backgroundColor: '#000000',
    padding: 16,
    margin: 20,
    marginLeft: 30,
    marginRight: 30,
    borderRadius: 20,
  },
  buttontext: {
    color: '#ffffff',
    fontSize: 24,
    textAlign: 'center',
  },
});

export default Start;

App.tsx #

import React from 'react';
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Start from './src/Screens/Start';
import Logandsignin from './src/Screens/Logandsingin';

export type RootStackParamList = {
  Start: undefined;
  Logandsignin: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Start">
        <Stack.Screen name="Start" component={Start} />
        <Stack.Screen name="Logandsignin" component={Logandsignin} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

依赖版本 #

{
  "@react-native-community/masked-view": "^0.1.11",
  "@react-navigation/native": "^6.1.17",
  "@react-navigation/stack": "^6.3.29",
  "react": "18.2.0",
  "react-native": "0.73.6",
  "react-native-gesture-handler": "^2.16.2",
  "react-native-reanimated": "^3.11.0",
  "react-native-safe-area-context": "^4.10.1",
  "react-native-screens": "^3.31.1"
}

解决方案 #

1. 补全react-native-gesture-handler的导入 #

React Navigation 6要求在入口文件最顶部导入react-native-gesture-handler，否则导航功能会出现异常。修改App.tsx，在文件最开头添加：

import 'react-native-gesture-handler';

2. 修正组件文件名拼写错误 #

App.tsx中导入Logandsignin的路径为./src/Screens/Logandsingin，但导航目标名称是Logandsignin，请确认实际文件名是否为Logandsignin.tsx：

• 如果文件名确实是Logandsingin.tsx，将导航目标名称和导入路径统一修改为Logandsingin；
• 如果文件名应为Logandsignin.tsx，修正导入路径为./src/Screens/Logandsignin。

3. 使用useNavigation钩子替代props传递 #

避免props传递navigation时可能出现的异常，改用React Navigation提供的useNavigation钩子获取导航实例。修改Start.tsx：

// 替换原有的Props和组件定义
import { useNavigation } from '@react-navigation/native';

const Start: React.FC = () => {
  const navigation = useNavigation<StartScreenNavigationProp>();
  // 剩余代码保持不变
};

4. 清除缓存并重启项目 #

缓存问题可能导致导航逻辑异常，执行以下命令重置缓存并重启项目：

# 重置Metro缓存
npx react-native start --reset-cache
# 重新运行iOS项目
npx react-native run-ios
# 或重新运行Android项目
npx react-native run-android

内容的提问来源于stack exchange，提问作者user24740483