React Native组件间通信

React Native组件间通信

　　React Native组件的关系有：父子关系、无直接关系。组件间通信主要针对这两类来讨论。

　　父组件向子组件传递消息、数据通过对子组件的属性赋值来实现。比如styles属性、placeholder属性等。

　　子组件向父组件传递消息、数据通过回调父组件传递给自己的回调函数来实现。回调函数由父组件设置，被保存在子组件的某个属性中。

二、无直接关系的组件之间通信

　　无直接关系的组件之间通信是通过本地数据的存储和读取来完成。

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。