1. 程式人生 > >undefined is not an object (evaluating 'this.props.nav.push')的解決過程

undefined is not an object (evaluating 'this.props.nav.push')的解決過程

說明:剛接觸react native不到兩個星期,這兩天在做頁面跳轉的時候遇到了這個問題(頭疼了兩天)。剛剛終於解決了,先把解決過程記錄下來

1、當前react native的最新版本是0.47,因此Navigator需要從react-native-deprecated-custom-components中引入(見官方文件

,程式碼如下:

import {Navigator} from 'react-native-deprecated-custom-components'

2、但是在執行專案的時候,總是提示錯誤:undefined is not an object (evaluating 'this.props.nav.push')。

在查到的解決方案主要有一下三種:

方案一:將函式自動繫結this物件

方案二:在constructor函式上進行this繫結

方案三:使用Es6的箭頭函式

但是經過測試都以失敗告終,更準確的說法是不是失敗,而是還沒有找到解決問題的關鍵。

3、要想解決這個問題,關鍵是要找到'this.props.nav.push'這個提示中哪個是undefined:

goToAboutUs() {
    let navigator = this.props.nav;
    Alert.alert('Button clicked  ' + navigator);
    if (navigator) {
        navigator
.push({ id: 'aboutUs', title: 'aboutUs', }); } }

經過這個可以找到“nav”是undefined的

4、如此一來這個問題就很好解決了,找到nav最開始出現的地方(按照頁面巢狀或者引用),最終在註冊跳轉元件的方法裡:

static _renderPage(route, nav) {
    switch (route.id) {
        case 'main':
            return (<MainScreen nav={nav}/>);
            break
; } }

這樣,只要將這個“nav”通過頁面引用傳遞到需要的頁面,這個問題就會解決。在元件MainScreen中可以這樣傳遞到Mine頁面中:

<Mine nav={this.props.nav}/>
然後就可以在Mine頁面中使用了:
<Button
    onPress={() => this.props.nav.push({
        id: 'aboutUs',
        title: 'aboutUs',
    })}
    title="AboutUs"
/>

第一次寫部落格,互相學習,不足之處敬請諒解!