undefined 不是一個對象（評估'this.props.navigation.navigate'）-React Native

Question

我正在嘗試制作我的第一個 React Native Android 應用程序，但出現此錯誤：

undefined 不是一個對象（評估'this.props.navigation.navigate'）

這是代碼：

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

我無法弄清楚為什么會出現錯誤。

Answer 1

您正在錯誤地導出組件。 你應該在你的class HomeScreen定義中去掉export default ，並在文件底部做export default App;

Answer 2

如果您在 AppContainer 中處理它並且無法在打開抽屜菜單時訪問它。 您可以嘗試以下代碼段。

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