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);
            }
          });