📅  最后修改于: 2020-12-08 06:14:20             🧑  作者: Mango
在本章中,我们将向您展示如何使用AsyncStorage持久化数据。
在此步骤中,我们将创建App.js文件。
import React from 'react'
import AsyncStorageExample from './async_storage_example.js'
const App = () => {
return (
)
}
export default App
初始状态下的名称为空字符串。装入组件后,我们将从持久性存储中对其进行更新。
setName将从我们的输入字段中获取文本,使用AsyncStorage保存并更新状态。
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 (
{this.state.name}
)
}
}
export default AsyncStorageExample
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 50
},
textInput: {
margin: 5,
height: 100,
borderWidth: 1,
backgroundColor: '#7685ed'
}
})
运行应用程序时,可以通过在输入字段中键入来更新文本。