۲۹
فروردین

جلسه ۲۹ : کار باAsyncStorage درReact Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. تا اینجا در مورد نحوه کار با کامپوننت های مختلف و استفاده از Geolocation در React Native و بسیاری از مباحث دیگر که طی جلسات ارایه شد می دونیم. حال که در قسمت آخر مجموعه آموزشی راکت نیتیو قرار داریم می خواهیم موضوع ذخیره اطلاعات با AsyncStorage در React Native رو داشته باشیم. پس کار با AsyncStorage در React Native رو دنبال می نماییم.

ذخیره سازی اطلاعات با AsyncStorage در React Native

در این فصل، ما به شما نشان می دهیم که چگونه اطلاعات خود را با استفاده از AsyncStorage حفظ کنید.
مرحله ۱: Presentation

در این مرحله ما فایل App.js را ایجاد خواهیم کرد.

مثال :

import React from 'react'
import AsyncStorageExample from './async_storage_example.js'

const App = () => {
   return (
      <AsyncStorageExample />
   )
}
export default App

import React from 'react'

import AsyncStorageExample from './async_storage_example.js'

const App = () => {

return (

)

}

export default App

مرحله ۲: Logic

نام یا 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'
   }
})

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 (

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

}

})

وقتی ما برنامه را اجرا می کنیم، می توانیم متن را با تایپ کردن در فیلد ورودی به روزرسانی کنیم.

ذخیره سازی اطلاعات با AsyncStorage در React Native

کلام پایانی

خب دوستان با موضوع ذخیره اطلاعات با AsyncStorage در React Native مباحث آموزشی راکت نیتیو رو به پایان می رسونیم. امیدوارم این سری از آموزش ها مفید واقع شده باشد.

موفق و پیروز باشید.