undefined不是对象（正在评估'this.props.navigation.navigate'）错误

Question

我阅读了与此错误有关的一些解决方案，但没有使用它。它们中的大多数由于不同的原因而得到相同的错误。我是React-Native的初学者。所以请帮帮我！

App.js

import loginScreen from './components/Login';
import React from 'react'
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import homeScreen from "./HomeScreen";
import LoadingScreen from "./components/LoadingScreen";
import SignUpScreen from "./components/SignUpScreen";
import StarterScreen from "./components/starter";
import ShoppingCartIconScreen from './components/ShoppingCartIcon';
import SummeryScreen from './components/summery'

const MainNavigator=createStackNavigator(
    {
      signup:{screen:SignUpScreen},
      login:{screen:loginScreen},
      Loading: {screen: LoadingScreen },
      Summery:{screen:SummeryScreen}, //exporting the Summery component
      Starter:{screen:StarterScreen,
      navigationOptions:{
        title:'Starters',
        headerRight:<ShoppingCartIconScreen/>,//using as a icon on the navigation header.
        headerStyle:{
          backgroundColor:'#694fad'
        },
        headerTitleStyle:{
          color:'white'
        }
      }},
      Home: { screen: homeScreen,
      navigationOptions:{
        headerTitle:'Home',
        headerRight:<ShoppingCartIconScreen/>,
        headerStyle:{
          backgroundColor:'#694fad',
        },
        headerTitleStyle:{
          color:'white'
        }
      }}
      },
    {
      initialRouteName:"Home"  //set home as a default screen
    }
  );
  const App=createAppContainer(MainNavigator);
  export default App; //exporting App.js with stack navigator

ShoppingCartIcon.js

import React from 'react';
import {View,Text,StyleSheet,Platform} from 'react-native';
import Icon from '@expo/vector-icons/Ionicons'

//creating a constant
const ShoppingCartIcon = (props) => (
        <View style={[{ padding: 5 }, Platform.OS == 'android' ? styles.iconContainer : null]}>
        <View style={{
            position: 'absolute', height: 20, width: 20, borderRadius: 15, backgroundColor: '#e3e3e3', right: 6, bottom: 29, alignItems: 'center', justifyContent: 'center', zIndex: 2500,

        }}>
            <Text style={{ color: 'black', fontWeight: 'bold' }}>0</Text>
        </View>
        <View style={{top:3}}>
        <Icon onPress={()=>props.navigation.navigate("Summery")}  name="ios-cart" size={35} color='yellow' /> //navigate to summery screen on icon press
        </View>
    </View>
)

export default ShoppingCartIcon; //exporting shoppingcarticon

Summery.js//只是一个虚拟文件从'react'导入React从'react-native'导入{View，Text，StyleSheet}

//nothing special here
export default class summery extends React.Component {
    render() {
        return (
            <View style={styles.container}>
            <Text>summery page</Text>
            </View>
        )
    }
}

Answer 1

[this.props.navigation仅在直接分配给导航器中的屏幕的组件中可用，例如createStackNavigator生成的堆栈导航器。

[如果要访问这些组件之外的导航，请直接通过navigation道具（我不推荐），或者按照本教程进行导航，而无需使用navigation道具：https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

Answer 2

[嗯，我认为您的错误是因为您没有将ShoppingCartIcon添加为StackNavigator的一部分，因此，您无法从props查询导航器属性。您可以做的是通过ShoppingCartIcon的道具传递App的导航器属性，我的意思是您应该编写这样的内容

// App.js
import LoginScreen from './components/Login';
import React from 'react'
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import HomeScreen from "./HomeScreen";
import LoadingScreen from "./components/LoadingScreen";
import SignUpScreen from "./components/SignUpScreen";
import StarterScreen from "./components/starter";
import ShoppingCartIconScreen from './components/ShoppingCartIcon';
import SummeryScreen from './components/summery'

const MainNavigator=createStackNavigator(
    {
      Signup:SignUpScreen,
      Login:LoginScreen, //Name of components have to start with Uppercase Letter
      Loading: LoadingScreen,
      Summery: SummeryScreen, //exporting the Summery component
      Starter:StarterScreen,
      Home: HomeScreen,
    },
    {
      initialRouteName:"Home"  //set home as a default screen
    }
  );
  const AppContainer=createAppContainer(MainNavigator);
  class App extends React.Component{
      constructor(props){
          super(props)
      }
      render(){
          return(
            <AppContainer/>
          )
      }
  }
  export default App; //exporting App.js with stack navigator


  //ShoppingCartIcon.js
import React from 'react';
import {View,Text,StyleSheet,Platform} from 'react-native';
import Icon from '@expo/vector-icons/Ionicons'

//creating a constant
const ShoppingCartIcon = (navigation) => (
        <View style={[{ padding: 5 }, Platform.OS == 'android' ? styles.iconContainer : null]}>
        <View style={{
            position: 'absolute', height: 20, width: 20, borderRadius: 15, backgroundColor: '#e3e3e3', right: 6, bottom: 29, alignItems: 'center', justifyContent: 'center', zIndex: 2500,

        }}>
            <Text style={{ color: 'black', fontWeight: 'bold' }}>0</Text>
        </View>
        <View style={{top:3}}>
        <Icon onPress={()=> navigation.navigate("Summery")}  name="ios-cart" size={35} color='yellow' /> //navigate to summery screen on icon press
        </View>
    </View>
)

export default ShoppingCartIcon; //exporting shoppingcarticon

//Home.js or Starter.js
class Name extends React.Component{
    //Add this
    static navigationOptions = ({ navigation }) => { //Configuración de pantalla
        return {
            title:'Name',
            headerRight:(<ShoppingCartIconScreen navigation = {navigation}/>),//using as a icon on the navigation header.
            headerStyle:{
              backgroundColor:'#694fad'
            },
            headerTitleStyle:{
              color:'white'
            }
        };
      };
}

在这种情况下，这是为每个屏幕定义navigationOptions的更好方法。就像我在上面的代码中描述的那样。此外，我建议使用这种方法来定义反应组件：

class App extends React.Component{
      constructor(props){
          super(props)
      }
      //Some functions ...
      render(){ return(//.... what you want)}

希望对您有帮助：）