Android “未定义”不是react native中的对象（计算'；this.props.navigation.navigate'；）错误

我阅读了一些与此错误相关的解决方案，但没有利用它们。由于不同的原因，他们中的大多数人都会出现相同的错误。我是一个初学者，不会做出土生土长的反应。所以请帮帮我

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

import loginScreen from./components/Login'；
从“React”导入React
从“反应导航堆栈”导入{createStackNavigator}；
从“react navigation”导入{createAppContainer}；
从“/homeScreen”导入主屏幕；
从“/components/LoadingScreen”导入加载屏幕；
从“/components/SignUpScreen”导入SignUpScreen；
从“/components/starter”导入启动器屏幕；
从“./components/ShoppingCartIcon”导入ShoppingCartIconScreen；
从“./components/summery”导入SummeryScreen
const MainNavigator=createStackNavigator(
{
注册：{screen:SignUpScreen}，
登录：{screen:loginScreen}，
正在加载：{screen:LoadingScreen}，
Summery:{screen:SummeryScreen}，//导出Summery组件
启动器：{屏幕：启动器屏幕，
导航选项：{
标题:"先发者",，
headerRight:，//用作导航标题上的图标。
头型：{
背景颜色：“#694fad”
},
头饰样式：{
颜色：'白色'
}
}},
主屏幕：{屏幕：主屏幕，
导航选项：{
标题：“家”，
头灯：，
头型：{
背景颜色：“#694fad”，
},
头饰样式：{
颜色：'白色'
}
}}
},
{
initialRouteName：“主页”//将主页设置为默认屏幕
}
);
const App=createAppContainer（MainNavigator）；
导出默认应用程序//使用堆栈导航器导出App.js

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

从“React”导入React；
从“react native”导入{视图、文本、样式表、平台}；
从“@expo/vector icons/Ionicons”导入图标
//创建常数
const ShoppingCartIcon=（道具）=>(
0
props.navigation.navigate（“Summy”）}name=“ios购物车”size={35}color='yellow'/>//在图标按下时导航到Summy屏幕
)
导出默认购物车图标//导出购物车图标

Summy.js //只是一个虚拟文件 从“React”导入React 从“react native”导入{视图、文本、样式表}

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

//这里没什么特别的
导出默认类summy扩展React.Component{
render（）{
返回(
摘要页
)
}
}

此.props.navigation

仅在导航器中直接指定为屏幕的组件中可用，例如由

createStackNavigator生成的堆栈导航器

如果您想访问这些组件之外的导航，可以直接通过
导航
道具（我不建议这样做），或者按照本教程在没有
导航
道具的情况下导航：
好吧，我想您的错误是因为您没有将ShoppingCartIcon添加到StackNavigator中，因此，您无法从道具查询导航器属性。你可以通过ShoppingCartIcon的道具来传递应用程序的导航属性，我的意思是你应该这样写

// 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'
            }
        };
      };
}

我希望这对您有所帮助：）
我尝试了您提到的方法，但无效。这个导航的东西真让人头疼。
class App extends React.Component{
      constructor(props){
          super(props)
      }
      //Some functions ...
      render(){ return(//.... what you want)}