TypeError: undefined is not an object (evaluating 'navigation.navigate') 当 navigation 参数已经嵌套在组件中

Posted 2023-02-16

【中文标题】TypeError: undefined is not an object (evaluating \'navigation.navigate\') 当 navigation 参数已经嵌套在组件中

【英文标题】：TypeError: undefined is not an object (evaluating 'navigation.navigate') given when navigation parameter already nested in componentTypeError: undefined is not an object (evaluating 'navigation.navigate') 当 navigation 参数已经嵌套在组件中

【发布时间】：2022-01-04 18:32:45

【问题描述】：

每当我将一个具有导航功能的组件放入另一个组件中时，我总是会在标题中看到错误。

传入导航的组件：

import React from 'react'
import  View, Text, Pressable, StyleSheet  from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'


const SearchBar = (navigation) => 
    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;

const styles = StyleSheet.create(
    SearchBar: 
        width: '80%',
        backgroundColor: 'white',
        height: 42,
        borderRadius: 20,
        alignItems: 'center',
        flexDirection: 'row',
        position: 'absolute',
        top: 10,
        left: '10%',
        paddingLeft: 10,
        
      ,

      searchBarText: 
        color: '#d3d3d3',
        fontSize: 15,
        width: '100%'
        
      ,

)

内部嵌套有组件的文件：

import * as React from "react";
    import  StyleSheet, Text, View, Pressable, ScrollView, TouchableOpacity  from "react-native";
    
    import Ionicons from 'react-native-vector-icons/Ionicons';
    import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
    import SearchBar from "./Settings/SearchBar";
    import SettingsList from "./Settings/SettingsList/SettingsList";
    import SettingsListHeader from "./Settings/SettingsListHeader";
    
    
    
    export default function SettingsScreen(navigation) 
      return (
        <View style=styles.container>
          
          <SearchBar />
          /* <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> */
    
    <SettingsListHeader />
    <ScrollView style=marginTop: 35,
     showsVerticalScrollIndicator=false>
      
    <SettingsList />

嵌套到文件中的组件是“SearchBar”，当您单击它时，您应该被定向到另一个页面，但相反，我收到一个错误

TypeError: undefined is not an object (evalating 'navigation.navigate')

我对如何解决它感到困惑。

【参考方案1】：

发现只有我的路由的直接子节点可以使用导航道具，所以我决定将导航道具传递给我的组件 SearchBar

export default function SettingsScreen(props, navigation) 
  return (
    <View style=styles.container>
      
      <SearchBar navigation=props.navigation />