react-native缓存数据

最新推荐文章于 2025-09-19 01:12:31 发布

原创最新推荐文章于 2025-09-19 01:12:31 发布 · 8.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个React Native应用示例介绍了如何使用AsyncStorage进行数据的存储与读取操作。示例中创建了一个简单的应用界面，包含保存和获取数据两个按钮，分别用于将对象数据保存到AsyncStorage并从中读取。

部署运行你感兴趣的模型镜像

'use strict';

import React, { Component } from 'react';
import {
AppRegistry,
NavigatorIOS,
StyleSheet,
ListView,
View,
Text,
TouchableHighlight,
Alert,
AsyncStorage,
} from 'react-native';

class Stroage extends Component {

saveData() {
let UID123_object = {
name: 'Chris',
age: 30,
traits: {hair: 'brown', eyes: 'brown'},
};
// You only need to define what will be added or updated
let UID123_delta = {
age: 31,
traits: {eyes: 'blue', shoe_size: 10}
};

AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => {
AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => {

});
});
}

fetchData() {
AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
let obj = JSON.parse(result);
console.log(obj);
console.log(obj.name);
console.log(obj.traits);
});
}

render(){
return(
<View>
<View style = {styles.container}>
<TouchableHighlight onPress= {
this.saveData
}>
<Text style = {styles.text}>
保存数据
</Text>
</TouchableHighlight>
</View>

<View style = {styles.container}>
<TouchableHighlight onPress= {
this.fetchData
}>
<Text style = {styles.text}>
获取数据
</Text>
</TouchableHighlight>
</View>
</View>
);
}
}

var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
//justifyContent: 'center',
alignItems: 'center',
},
text: {
alignSelf:'center',
backgroundColor:'red',
margin:30,
fontSize:20,

},
});

AppRegistry.registerComponent('TestProject', () => Stroage);

您可能感兴趣的与本文相关的镜像

PyTorch 2.6

PyTorch

Cuda

PyTorch 是一个开源的 Python 机器学习库，基于 Torch 库，底层由 C++ 实现，应用于人工智能领域，如计算机视觉和自然语言处理