React-Native AsyncStorage setNativeProps

有时候我们需要直接改动组件并触发局部的刷新，但不使用state或是props。 setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ，则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。

使用例子

 class MyButton extends React.Component({   setNativeProps(nativeProps) {        this._root.setNativeProps({   //这里输入你要修改的组件style            height:48,            backgroundColor:'red'        });   },   render() {        return (            <View ref={component => this._root = component} {...this.props} style={styles.button}>             <Text>{this.props.label}</Text>        </View>        )   }, });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

避免和render方法的冲突

如果要更新一个由render方法来维护的属性，则可能会碰到一些出人意料的bug。因为每一次组件重新渲染都可能引起属性变化，这样一来，之前通过setNativeProps所设定的值就被完全忽略和覆盖掉了。

React Native 学习资源精选仓库

AsyncStorage官网

React Native 每日一学(Learn a little every day)

React Native - 持久化存储（AsyncStorage）的使用详解

AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。它用来代替LocalStorage。

我们在AsyncStorage的基础上做一层抽象封装，而不是直接使用AsyncStorage。

AsyncStorage是不支持sql的，AsyncStorage是Key-Value存储系统。

方法

'use strict';import {AsyncStorage} from 'react-native';class EKVData{//setItem:保存数据。//将key字段的值设置成value，并在完成后调用callback函数。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。    static setData(key, value) {        return new Promise((resolve, reject) => {            AsyncStorage.setItem(key, JSON.stringify(value), (error)=>{                if(!error)                    resolve('操作成功');                else                    reject('操作失败');            });        });    }//getItem:查询key。//读取key字段并将结果作为第二个参数传递给callback。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。    static getData(key) {        return new Promise((resolve, reject) => {            AsyncStorage.getItem(key, (error, result) => {                if(!error){                    if(result){                        resolve(result);                    }else{                        reject(null);                    }                }else{                    reject(null);                }            });        });    }//removeItem:删除一个字段。返回一个Promise对象。    static removeData(key) {        return new Promise((resolve, reject)=>{            AsyncStorage.removeItem(key, (error)=>{                if(!error)                    resolve('操作成功');                else                    reject('操作失败');            });        });    }}module.exports = EKVData;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

static multiGet() 
获取keys所包含的所有字段的值，调用callback回调函数时返回一个key-value数组形式的数组。返回一个Promise对象。

multiGet([‘k1’, ‘k2’], cb) -> cb([[‘k1’, ‘val1’], [‘k2’, ‘val2’]])

AsyncStorage.multiGet(keys, (err, stores) => {            try {            //map方法三个参数:当前正在遍历的元素, 元素索引, 原数组本身.              stores.map((result, i, store) => {              // get at each store's key/value so you can work with it                let key = store[i][0];                let value = store[i][1];                if (value)items.push(JSON.parse(value));              });              resolve(items);            } catch (e) {              reject(e);            }          });

转载http://blog.csdn.net/zengyonglan/article/details/72865046