React Native - AsyncStorage
Dalam bab ini, kami akan menunjukkan kepada Anda bagaimana mempertahankan data Anda menggunakan AsyncStorage.
Langkah 1: Presentasi
Pada langkah ini, kami akan membuat file App.js mengajukan.
import React from 'react'
import AsyncStorageExample from './async_storage_example.js'
const App = () => {
return (
<AsyncStorageExample />
)
}
export default App
Langkah 2: Logika
Namedari keadaan awal adalah string kosong. Kami akan memperbaruinya dari penyimpanan persisten ketika komponen dipasang.
setName akan mengambil teks dari kolom input kita, menyimpannya menggunakan AsyncStorage dan perbarui status.
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'
}
})
Saat kami menjalankan aplikasi, kami dapat memperbarui teks dengan mengetik di kolom input.