上一章React
Native实战教程请查看：React
Native Geolocation地理定位
在本章中，我们将展示如何使用AsyncStorage持久化数据。
步骤1：表示在这一步中，我们将创建App.js文件。
import React from 'react';
import AsyncStorageExample from './async_storage_example.js';
const App = () => {
return <
AsyncStorageExample />;
};
export default App;
步骤2：逻辑初始状态的名称为空字符串，当组件被挂载时，我们将从持久存储中更新它。
【React Native AsyncStorage持久化 – React Native实战教程】setName将从输入字段获取文本，使用AsyncStorage保存它并更新状态。
async_storage_example.js
import React, {Component} from 'react';
import {StatusBar} from 'react-native';
import {AsyncStorage, Text, View, TextInput, StyleSheet} from 'react-native';
class AsyncStorageExample extends Component {
state = {
name: '',
};
componentDidMount = () =>
AsyncStorage.getItem('name').then(value => this.setState({name: value}));
setName = value => {
AsyncStorage.setItem('name', value);
this.setState({name: value});
};
render() {
return (
<
View style={styles.container}>
<
TextInput
style={styles.textInput}
autoCapitalize="none"
onChangeText={this.setName}
/>
<
Text>{this.state.name}<
/Text>
<
/View>
);
}
}
export default AsyncStorageExample;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
marginTop: 50,
},
textInput: {
margin: 5,
height: 100,
borderWidth: 1,
backgroundColor: '#7685ed',
},
});
当我们运行应用程序时，我们可以通过在输入字段中输入来更新文本。
文章图片
推荐阅读
- html基本概念和入门开发 – HTML教程
- CSS attr()函数代码简单示例
- 从列表中移除满足Java中给定谓词的元素
- 算法题（100头牛和牛奶问题）
- AngularJS ng-bind指令用法详细指南
- Python（将字典作为参数传递给函数）
- Scala中的数据类型详细介绍和解释
- Golang中的嵌套结构代码示例解释
- 亚马逊面试体验（AmazonWow）