React Native Navigation(StackNavigator)：我收到一个错误，说" undefined is not an object (evaluating 'this.pro

Question

我刚刚开始学习反应态。...现在做一个宠物项目。在应用程序中，单击它的按钮可导航到另一个屏幕。我遇到以下错误，说"未定义不是对象（评估'this.props.navigate'）"以下是文件

index.js

  import React from "react";
  import Navigator from "./config/routes";
  export default () => <Navigator />;

我的config/doutes.js

中的代码

import { StackNavigator } from "react-navigation";
import Home from "../screens/Home";
import List from "../screens/List";
export default StackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      header: () => null
    }
  },
  List: {
     screen: List
  }
});

和我的组件文件home.js，它的按钮单击时单击导航到另一个屏幕

 /*all import statements*/
 class Home extends Component {
    handlePressBaseCurrency() {
       console.log("base currency button clicked");
       this.props.navigation.navigate("List"); /* error from this line */
    }
    render() {
            return (
                <UserInput
                    currencyShort={TEMP_BASE_CURRENCY}
                    onPress={this.handlePressBaseCurrency}
                    defaultValue={TEMP_BASE_PRICE}
                    keyboardType="numeric"
                    onChangeText={this.handleTextChange}
                />
            );
        }
 }

请帮忙！！！预先感谢：D

Answer 1

this在handlePressBaseCurrency中未正确绑定。您可以：

1. 明确绑定构造函数中的this：

   constructor(props) {
     super(props);
     this.handlePressBaseCurrency = this.handlePressBaseCurrency.bind(this);
   }
   

2. 来自React Docs的处理事件：

   如果调用bind会惹恼您，则可以通过两种方式解决此问题。如果您使用的是实验性公共类字段语法，则可以使用类字段正确绑定回调：

   handlePressBaseCurrency = () => {
     console.log("base currency button clicked");
     this.props.navigation.navigate("List");
   };