react-native 學習總結

react-native 基礎以及各個方面知識店等。一方面做爲學習總結，另外一方面也方便查閱，總結並沒有嚴格順序，天天遇到則加上。

不一樣頁面路由傳輸數據——與父子組件傳遞數據通訊不同

• 從第一個頁面，跳轉到兩一個頁面時能夠在navigator.push裏面加入傳輸的參數

• 從第二個頁面返回到上一個頁面時候也須要傳遞參數回上一個頁面:可是navigator.pop()並無提供參數，由於pop()只是從[路由1,路由2，路由3。。。]裏把最後一個路由踢出去的操做，並不支持傳遞參數給倒數第二個路由，這裏要用到一個概念，把上一個頁面的實例或者回調方法，做爲參數傳遞到當前頁面來，在當前頁面操做上一個頁面的state:

sequenceDiagram
firstPage->>secondPage: navigator.push({para:{id:1}）
secondPage->>firstPage: 回調方法傳遞到當前頁面來

es5代碼示例

navigator.push({
    name: 'SecondPageComponent',
    component: SecondPageComponent,
    params: {
        id: this.state.id,
        //從SecondPageComponent獲取user
        getUser: function(user) {
            _this.setState({
                user: user
            })
        }
    }
});

es6代碼示例

navigator.push({
    name: 'SecondPageComponent',
    component: SecondPageComponent,
    params: {
        id: this.state.id,
        //從SecondPageComponent獲取user
        getUser: (user)=>{
            this.setState({
                user: user
            })
        }
    }
});

react-native中文社區的navigator教程示例

pressButton() {
            const { navigator } = this.props;
            if(this.props.getUser) {
                let user = USER_MODELS[this.props.id];
                this.props.getUser(user);
            }
            // 按到返回時候 先進行數據處理，用上級函數方法，而後再跳轉回去
            if(navigator) {
                navigator.pop();
            }
    }

1.明顯能夠看出es6箭頭函數的方便和簡潔
2.可是物理返回鍵時數據處理（前面頁面如何進行更新？解決中 extend backAndroid）
安卓back鍵的處理相關問題