React Native - Navigator在不同方法中不一致

我正在創建我的第一個React Native App。我正在嘗試使用導航器對象在不同視圖之間進行導航。React Native - Navigator在不同方法中不一致

在下面的代碼片段。的openRecipe方法書面作品完美，但GoBack方法拋出異常說 未定義不是一個對象（評價this.props.navigator）

我還沒有添加任何道具組件類，這是我最初被認爲是一個問題，但由於OpenRecipe方法工作正常，我很困惑爲什麼goBack拋出異常，它具有與openRecipe方法相同的方法體。

如果沒有包含依賴關係的問題，那麼它應該在兩個方法中一致。

一旦它被整理出來，我打算使用this.props.navigator.pop（）返回上一頁。

openRecipe(data){ 
    this.props.navigator.push({ 
     id: 'RecipePage', 
     name: 'Recipe', 
    }); 
    } 

    goBack(){ 
    Alert.alert(
       "Here Back!", 
       ) 
    this.props.navigator.push({ 
     id: 'RecipePage', 
     name: 'Recipe', 
    }); 
    } 



    render() { 

    return (
     <View style={styles.container}> 
     <View style={styles.row}> 
      <Text style={styles.title}>Recipe</Text> 

      <TouchableHighlight onPress={this.goBack}> 
       <Text style={styles.title} >BACK</Text> 
      </TouchableHighlight> 
     </View> 

     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(data) => 
     <TouchableHighlight onPress={() => this.openRecipe(data)}> 
      <View style={styles.article_container} > 
       <Text style={styles.article_title} >{data.title}</Text> 

       <Image style={styles.article_img} 
        source={{uri: data.image_link}} 
       /> 
      </View> 
     </TouchableHighlight> 


     } 
     /> 

     </View> 
    );

來源

2017-02-04 Shaurya Chaudhuri

如果組件被作爲一個ES6類中實現，該方法goBack不會自動綁定到對象，這React.createClass自動執行的this實例。該解決方案是在一個「脂肪箭頭」拉姆達傳作爲onPress支柱（例如onPress={() => this.goBack()}），這將結合this到它具有的值，其中的λ被定義，或與onPress={this.goBack.bind(this)}

爲了詳細描述明確地結合它，現在我不是一個電話鍵盤上......

在JavaScript中的this的價值取決於它的函數（或方法）是稱爲，不要在那裏它被定義的上下文。當一個函數是一個對象（一個方法）的屬性時，和這樣調用，this具有您可能期望的值;它是包含該方法的父對象。

const person = { 
    name: 'Shaurya', 
    sayHello() { 
    return "Hi " + this.name 
    } 
} 

person.sayHello() // -> "Hi Shaurya"

但如果我存儲sayHello功能的變量，從「外部」的對象的背景下把它的this值將取決於您所呼叫從功能。如果您在全局範圍內運行（例如在全局函數內或在節點repl內），則this將成爲全局對象（其中生成的語言如Math生效）。除非恰好有一個name屬性，你會得到undefined爲this.name：

let sayHi = person.sayHello 
sayHi() // -> "Hi undefined"

可以使用Function類型的.apply方法的this值否則臨時設置的東西：

sayHi.apply(person) // -> "Hi Shaurya" 
sayHi.apply({name: "Yusef"}) // -> "Hi Yusef" 
sayHi() // -> still "Hi undefined"

或者，您可以使用.bind設置的this的價值並使其堅持：

var sayHiToPerson = person.sayHello.bind(person) 
sayHiToPerson() // -> "Hi Shaurya"

在ES6中引入的「胖箭頭」lambdas捕獲值爲this，無論您調用它的位置，this都將具有與定義lambda時的值相同的值。這就是爲什麼你的第二個onPress處理程序工作，但第一個沒有。在() => this.openRecipe(data)的主體內部，this自動綁定到它在.render方法中的值。但是，如果您僅通過this.goBack，則會丟失該上下文，並且this在事件處理系統調用該函數時具有不同的值。

來源

2017-02-04 13:34:57 sefnap

React Native - Navigator在不同方法中不一致

回答

相關問題