React Native调用navigation.reset报undefined is not an object错误如何解决

报错核心原因是执行navigation.reset时，navigation对象本身为undefined，和TouchableOpacity组件没有直接关联，按以下步骤修改即可解决：

• 1. 补全缺失的基础导入
     你当前代码中使用了useEffect但未导入React相关依赖，首先在代码顶部补全导入语句：

import React, { useEffect } from 'react'

• 2. 修复导航对象获取逻辑
     如果DogsList组件没有直接注册为导航栈的路由页面（即没有作为Stack.Screen的component属性值），默认不会被框架注入navigation属性，优先使用useNavigation钩子获取导航实例，无需依赖props传入：
     首先导入对应钩子：

import { useNavigation } from '@react-navigation/native'

在组件内部调用钩子获取导航实例：

const DogsList = () => {
  const navigation = useNavigation()
  // 保留原有业务逻辑
}

• 3. 增加调用防护
     调用navigation.reset时增加可选链操作符，避免对象为空时直接抛出错误：

onPress={() => navigation?.reset({
  index: 0,
  routes: [{name: 'List', params: {breed: dog}}],
})}

修改后完整代码 #

import React, { useEffect } from 'react'
import { StyleSheet, Text, View,TouchableOpacity } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import {useSelector, useDispatch} from 'react-redux'
import {fetchDogsAsync} from '../store/action/index'

const DogsList = () => {
    const navigation = useNavigation()
    const dispatch = useDispatch()
    const {dogs,isLoading} = useSelector(state => state)
    useEffect(() => {
        dispatch(fetchDogsAsync())
    }, [dispatch])
    console.log(dogs,isLoading);
    return (
        <View>
        {
                isLoading ? <Text>Loading...</Text> : (dogs?.message).map((dog,idx)=> {
                    return (
                        <TouchableOpacity key={dog} onPress={() => navigation?.reset({
                            index: 0,
                            routes: [{name: 'List', params: {breed: dog}}],
                          })}><Text>{dog}</Text></TouchableOpacity>
                    )

                })
            }
    </View>
    )
}

export default DogsList

const styles = StyleSheet.create({})

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