undefined 不是对象(评估 'this.props.navigation.navigate') React Native 中的错误

Question

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

应用.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

购物车图标.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

萨默里.js 只是一个虚拟文件 从"反应"导入反应 从"反应本机"导入{视图，文本，样式表}

//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

好吧，我认为您的错误是因为您没有将购物车图标添加为堆栈导航器的一部分，因此，您无法从 props 查询导航器属性。你可以做的是通过购物车图标的道具传递应用程序的导航器属性，我的意思是你应该写这样的东西

// 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)}

我希望这对你有所帮助:)