React Native組件間通訊

React Native組件間通訊

 

　　React Native組件的關係有：父子關係、無直接關係。組件間通訊主要針對這兩類來討論。

1、父組件和子組件之間通訊

　　父組件向子組件傳遞消息、數據經過對子組件的屬性賦值來實現。好比styles屬性、placeholder屬性等。

　　子組件向父組件傳遞消息、數據經過回調父組件傳遞給本身的回調函數來實現。回調函數由父組件設置，被保存在子組件的某個屬性中。

　　

2、無直接關係的組件之間通訊

　　無直接關係的組件之間通訊是經過本地數據的存儲和讀取來完成。

2.1 AsyncStorage

　　AsyncStorage與localStorage相似，存儲的數據是永久存儲，不會由於退出A應用而自動刪除數據。

　　AsyncStorage不提供索引、排序等數據庫中常常使用的功能。它只是一個簡單的、異步的「鍵值對」(key - value)存儲系統，開發者能夠用它來取代Android的sharedperference和IOS的NSUserDefaults。經過AsyncStorage的靜態方法，數據會保存到手機存儲空間中。開發者不須要指定，也不須要關心數據保存在了什麼文件或者數據庫、表中，AsyncStorage存儲的數據對該React Native應用都是全局可訪問的，開發這隻須要知道能經過AsyncStorage增、刪、改、查數據就能夠了。

2.1.1 寫入數據

寫入一組數據：

AsyncStorage.setItem('key', 'value').then(
    () =>{
        //這裏寫當數據保存成功後須要作的操做
    },
    (error) =>{
        //這裏寫操做失敗的處理
    }
);

 

寫入多組數據：

AsyncStorage.setItem( [ ['key1', 'value2'],['key2' , 'value2'] ]).then(
    () =>{
        //這裏寫當數據保存成功後須要作的操做
    }).catch( (errors) => {
    if(errors.length > 0){  //保存操做有異常

    }
    else {  //異常不是數據，有多是成功操做的處理函數拋出的異常

    }
});

 

2.1.2 讀取數據

讀取指定key的value：

AsyncStorage.getItem('key').then(
    (result) => {
        if(result === null){
            //存儲中沒有指定鍵對應的值
            return ;
        }
        //讀取成功的操做
    }
).catch((error) =>{
    //讀取失敗的操做
});

 

讀取多組數據：

AsyncStorage.multiGet(['key1', 'key2']).then(
    (results) => {
        console.log(results[0][0]);   //key1
        console.log(results[0][1]);   //value1
        console.log(results[1][0]);   //key1
        console.log(results[1][1]);   //value2
    }
).catch((error) =>{
    //讀取失敗的操做
});

2.1.3 刪除數據

刪除單個數據：

AsyncStorage.removeItem('key', 'value').then(
    () =>{
        //這裏寫當數據刪除成功後須要作的操做
    },
    (error) =>{
        //這裏寫操做失敗的處理
    }
);

刪除多組數據：

AsyncStorage.multiRemove( ['key1', 'value2'] ).then(
    () =>{
        //這裏寫當數據刪除成功後須要作的操做
    }).catch( (errors) => {
    if(errors.length > 0){  //保存操做有異常

    }
    else {  //成功操做的處理函數拋出的異常

    }
});

刪除全部數據：

AsyncStorage.clear().then(
    ()=>{
        //數據所有刪除成功的操做
    }
).catch((error) =>{
    //操做失敗或者成功處理拋出異常
})

2.2 JSON對象

讀取JSON文件：

　　let data = require('./data/myData.json');

將JSON對象轉化爲字符串：

　　let jsonString = JSON.stringify(data);

將字符串轉化爲JSON對象：

　　let data11 = JSON.parse(jsonString);

　　JSON類的parse函數要求嚴格，不容許有尾逗號。

　　JSON.parse('{"phone":"13838389438",}');

　　上面的代碼會拋出異常。

　　使用AsyncStorage來保存數據，只能保存一個字符串類型的數據。先後兩次保存相同的key值，後一次會覆蓋上一次的數據。在應用中，能夠配合使用AsyncStorage和JSON。