React Native嵌套导航组件报TypeError: undefined is not an object (evaluating 'navigation.navigate')

报错原因 #

你调用子组件时未传递navigation属性：SettingsScreen作为直接注册到导航栈的页面，本身可以正常拿到navigation参数，但你在父组件内引用<SearchBar />时没有主动把navigation传递给子组件，导致SearchBar内部的navigation为undefined，调用navigate方法时就会触发该报错。

解决方案 #

这里提供2种常用的修复方案，你可以根据自己的项目场景选择：

• 方案1：父组件透传navigation参数（最简单，适合单层嵌套场景）
  直接修改SettingsScreen中调用SearchBar的代码，手动传入navigation即可：

// 把原来的 <SearchBar /> 改成下面的写法
<SearchBar navigation={navigation} />

• 方案2：使用useNavigation钩子获取导航对象（适合多层嵌套场景，避免逐层透传）
  不用依赖父组件传参，直接在SearchBar内部通过React Navigation提供的钩子拿导航对象，修改后的SearchBar代码如下：

import React from 'react'
import { View, Text, Pressable, StyleSheet } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
// 导入useNavigation钩子
import { useNavigation } from '@react-navigation/native'

const SearchBar = () => {
    // 内部直接获取导航对象，不需要从props接收
    const navigation = useNavigation()
    return (
        <Pressable style={styles.SearchBar} onPress={() => navigation.navigate('Settings Search')}> 
            <Ionicons name='settings-outline' color='#06d900' size={28} />
            <Text style={styles.searchBarText}>  Search Settings</Text> 
        </Pressable>
    )
}

export default SearchBar;

// 原有样式代码不变，此处省略

注意：使用该方案需要确保你的组件在导航容器（NavigationContainer）的包裹范围内，这是React Navigation正常工作的前提。

额外验证点 #

修复参数问题后如果仍有报错，请确认你要跳转的路由Settings Search已经在你的导航栈配置中完成注册，路由名称要完全匹配，区分大小写和空格。

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