۲۹
فروردین

جلسه ۱۲ : HTTP در فریم ورک React Native

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

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

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در جلسه قبل به چگونگی کار با تصاویر در فریم ورک محبوب React Native آشنا شدیم . در این قسمت قصد داریم آشنایی با HTTP در فریم ورک React Native و استفاده از Fetch در فریم ورک React Native رو داشته باشیم . پس با مبحث HTTP در فریم ورک React Native و استفاده از Fetch در فریم ورک React Native همراه ما باشید.

HTTP در فریم ورک React Native

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

App.js

مثال :

import React from 'react';
import HttpExample from './http_example.js'

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

import React from 'react';

import HttpExample from './http_example.js'

const App = () => {

return (

)

}

export default App

استفاده از Fetch در فریم ورک React Native

ما از روش چرخه componentDidMount برای بارگیری داده ها از سرور به محض نصب کامپوننت استفاده خواهیم کرد. این تابع درخواست GET را به سرور ارسال می کند، داده های JSON را برمی گرداند، وارد می کند خروجی را به کنسول و وضعیت ما را به روز رسانی می کند.

مثال :

http_example.js

1	http_example.js

مثال :

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

class HttpExample extends Component {
   state = {
      data: ''
   }
   componentDidMount = () => {
      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>
            <Text>
               {this.state.data.body}
            </Text>
         </View>
      )
   }
}
export default HttpExample

import React, { Component } from 'react'

import { View, Text } from 'react-native'

class HttpExample extends Component {

state = {

data: ''

}

componentDidMount = () => {

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>

<Text>

{this.state.data.body}

</Text>

</View>

)

}

export default HttpExample

خروجی

HTTP در فریم ورک React Native – استفاده از Fetch در فریم ورک React Native

کلام پایانی

همونطور که مشاهده نمودید در این قسمت از سری آموزش های راکت نیتیو، آشنایی با HTTP در فریم ورک React Native و استفاده از Fetch در فریم ورک React Native و چگونگی استفاده و کد نویسی آن ها رو داشتیم . در قسمت بعد به روش استفاده از Buttons یا دکمه ها در فریم ورک محبوب React Native خواهیم پرداخت . موفق باشید.

QR: جلسه ۱۲ : HTTP در فریم ورک React Native

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 1

رامین مهربانیان
شهریور ۱۶, ۱۳۹۸
افتضاح بوووووود..
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۲ : HTTP در فریم ورک React Native

مقدمه

HTTP در فریم ورک React Native

App.js

استفاده از Fetch در فریم ورک React Native

خروجی

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ