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'
   }
})

앱을 실행할 때 입력 필드에 입력하여 텍스트를 업데이트 할 수 있습니다.