React Native Navigation（StackNavigator）：我收到一條錯誤消息：“ undefined不是對象（正在評估'this.props.navigate'）”

Question

我才剛剛開始學習本機操作。...現在正在做一個寵物項目。...在應用程序中，單擊它時有一個按鈕導航到另一個屏幕。 我收到以下錯誤消息：“ undefined不是對象（正在評估'this.props.navigate'）”以下是文件

index.js

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

我的config / routes.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}
                />
            );
        }
 }

請幫忙！！！ 提前致謝

Answer 1

this在handlePressBaseCurrency未正確handlePressBaseCurrency 。 您可以：

1. 在您的構造函數中明確綁定 this ：

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

2. 從React Docs 處理事件 ：

   如果使綁定煩惱，可以通過兩種方法解決此問題。 如果使用實驗性的公共類字段語法 ，則可以使用類字段正確綁定回調：

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