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

我不知道为什么会出现错误。

原文由 Akshey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您错误地导出了组件。你应该摆脱 export default 在你的 class HomeScreen 定义和文件底部做 export default App;

原文由 hyb175 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 vicky keshri 发布，翻译遵循 CC BY-SA 4.0 许可协议