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。