آموزش AsyncStorage در برنامه نویسی ریکت نیتیو

3 سال پیش

آموزش AsyncStorage در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش AsyncStorage در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

در این درس، ما به شما نشان خواهیم داد که چگونه با استفاده از AsyncStorage داده های خود را حفظ کنید.

مرحله ۱: ارائه

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

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

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

مرحله ۲: منطق

نام از حالت اولیه رشته خالی است. هنگام نصب مولفه، آن را از فضای ذخیره سازی دائمی به روز خواهیم کرد.

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

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

React Native AsyncStorage

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

نویسنده مطلب erfan molaei

آموزش AsyncStorage در برنامه نویسی ریکت نیتیو

آموزش AsyncStorage در برنامه نویسی ریکت نیتیو

مرحله ۱: ارائه

مرحله ۲: منطق

async_storage_example.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

آموزش AsyncStorage در برنامه نویسی ریکت نیتیو

مرحله ۱: ارائه

مرحله ۲: منطق

async_storage_example.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه