undefined 不是一个对象（评估'this.props.navigation.navigate'）-React Native

Question

I am trying to make my first React Native Android app and I am getting this error:

undefined is not an object (evaluating 'this.props.navigation.navigate')

This is the code:

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {

  static navigationOptions = {
    title: 'Home',
  };

  render() {
    const { navigate } = this.props.navigation;    

    return (
      <View>
        <Button 
          title="Show Centers near me"
          onPress={() =>
            navigate('Results', "Search Term")
          }
          />
        <Text>or</Text>
      </View>
    );
  }
}


class ResultsScreen extends React.Component {

  static navigationOptions = {
    title: 'Results',
  };


  render() {
  const { navigate } = this.props.navigation;

    return (
      <View>
        <Text>Hi</Text>
      </View>
    );
  }
}

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Results: { screen: ResultsScreen }
});

I can not figure out why the error is coming.

Answer 1

You are exporting the component wrong. You should get rid of the export default on your class HomeScreen definition and at the bottom of the file do export default App;

Answer 2

If you are handling it in AppContainer and not able to access while opening drawer menu. You can try below snippets.

const HomeStackNavigator = createStackNavigator({   Home:    { 
    screen: Home,
    navigationOptions : ({navigation}) => ({
      title: 'Home',
      headerStyle: {
          backgroundColor: "#512DA8"
      },
      headerTitleStyle: {
          color: "#fff"            
      },
      headerTintColor: "#fff",
      headerLeft: <TouchableOpacity onPress={ () => navigation.openDrawer()}> 
      <Image 
      source={require('./images/menu_burger.png')}
      style={{width: 24, height: 24, padding: 5, marginLeft: 5}}/>
      </TouchableOpacity>
    })   } }, {   initialRouteName: 'DumontHome' })

Answer 3

尝试不使用“搜索词”或以这种方式：

navigate('route', {item:'search term'})