React Native - AsyncStorage
В этой главе мы покажем вам, как сохранить ваши данные, используя AsyncStorage.
Шаг 1. Презентация
На этом этапе мы создадим App.js файл.
import React from 'react'
import AsyncStorageExample from './async_storage_example.js'
const App = () => {
return (
<AsyncStorageExample />
)
}
export default App
Шаг 2: логика
Nameиз начального состояния пустая строка. Мы будем обновлять его из постоянного хранилища, когда компонент будет смонтирован.
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'
}
})
Когда мы запускаем приложение, мы можем обновить текст, введя его в поле ввода.