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。