بخش های اصلی

آموزش React Native

React Native – HTTP

در این بخش نحوه ی استفاده از fetch را برای هَندِل کردن درخواست های شبکه، آموزش میدیم.

نحوه ی استفاده از Fetch

در مثال زیر یک تابع به نامِ fetchData ایجاد می کنیم. این تابع درخواستِ GET را به سرور می فرسته، داده هایِ JSON را برمی گردانه، خروجی را به کنسول log میکنه و state (وضعیت) را به روز رسانی می کنه.

این تابع را با استفاده از ptopای به نام dataFromFetch، به کامپوننت نمایشی پاس میدیم.

src/components/myComponent/MyContainerComponent.js

مثال

import React, { Component } from 'react'
import {
   View
} from 'react-native'
import MyPresentationalComponent from './MyPresentationalComponent'

export default class MyContainerComponent extends Component {
   constructor(){
      super()
      this.state = {
         data: ''
      }
   }
   getData = () => {
      fetch('https://jsonplaceholder.typicode.com/posts/1', {
         method: 'GET'
      })
      .then((response) => response.json())
      .then((responseJson) => {
         console.log(responseJson);
         this.setState({
            data: responseJson
         })
      })
      .catch((error) => {
         console.error(error);
      });
   }
   render() {
      return (
         <View>
            <MyPresentationalComponent
               dataFromFetch = {this.state.data}
               getData = {this.getData}
            />
         </View>
      )
   }
}

در کامپوننت نمایشی یک دکمه برای فراخوانی تابعِ getData ایجاد می کنیم. وقتی داده fetch بشه، روی صفحه نمایش، نمایش داده میشه.

src/components/myComponent/MyPresentationalComponent.js

مثال

import React, { Component } from 'react'
import {
   Text,
   View,
   TouchableOpacity,
   StyleSheet
} from 'react-native'

const MyPresentationalComponent = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableOpacity
            style = {styles.button}
            onPress = {props.getData}>
            <Text>
               GET DATA
            </Text>
         </TouchableOpacity>
         <View>
            <Text>
               {props.dataFromFetch.body}
            </Text>
         </View>
      </View>
   )
}

export default MyPresentationalComponent

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      height: 600
   },
   button: {
      backgroundColor: 'silver',
   }
})

اکنون می توانید با کلیک کردن روی دکمه ی GET DATA، fetch را تست کنین. اگه درخواست با موفقیت انجام بشه، داده ها روی صفحه نمایش، نمایش داده میشن.

برای دیدن پاسخِ درخواست، می توانید کنسول را بررسی کنین.

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد