未定义不是响应本机中的对象(评估“ this.props.navigation.navigate”)错误

时间:2019-09-25 22:16:25

标签: android react-native react-navigation react-navigation-stack

我阅读了与此错误相关的一些解决方案,但没有使用它。它们中的大多数由于不同的原因而得到相同的错误。我是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>
        )
    }
}

2 个答案:

答案 0 :(得分:0)

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

如果您想访问这些组件之外的导航,请直接通过navigation道具(我不推荐),或者按照本教程进行导航,而无需使用navigation道具:{{3 }}

答案 1 :(得分:0)

好吧,我认为您的错误是因为您没有将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)}

希望对您有所帮助:)