|
有时候我们需要直接改动组件并触发局部的刷新，但不使用state或是props。 setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ，则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。
使用例子
- 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
class MyButton extends React.Component({ setNativeProps(nativeProps) {
this._root.setNativeProps({
height:48,backgroundColor:'red'
});
},render() {
return (
<View ref={component => this._root = component} {...this.props} style={styles.button}>
<Text>{this.props.label}</Text>
</View>
)
},});
避免和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存储系统。
方法
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
'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;
static multiGet()
获取keys所包含的所有字段的值，调用callback回调函数时返回一个key-value数组形式的数组。返回一个Promise对象。
multiGet([‘k1’,‘k2’],cb) -> cb([[‘k1’,‘val1’],[‘k2’,‘val2’]])
AsyncStorage.multiGet(keys,(err,stores) => {
try {
stores.map((result,i,store) => {
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 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
