React-Native中列表FlatList配合網絡請求fetch學習

使用Fetch   

React Native提供了和web標準一致的Fetch API,用於開發者訪問網絡的需求,他的使用很是簡單.

發起網絡請求

要從任意地址獲取內容的話,只須要簡單的將網址做爲參數傳遞給fetch便可 (fetch這個單詞也是獲取的意思):

fetch('https://facebook.github.io/react-native/movies.json')

Fetch還有可選的第二個參數,能夠用來設置請求的一些參數,能夠設置請求頭header參數,或者設置POST或GET方法等等:

fetch('https://facebook.github.io/react-native/movies.json',{

     method: 'GET',

     header:{

            'Accept': 'application/json',

           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'

    }

})

獲取數據

 

接下來咱們結合FlatList和Fetch進行實戰

先看一下效果

1,首先咱們先將網絡請求進行封裝,新建一個js文件NetUtils.js

2,在App.js中調用該網絡請求

 首先引入封裝的網絡請求js文件並初始化url地址 

  先看一下數據結構 

而後根據數據結構定義構造器

如今就能夠直接調用網絡請求了. 

到這裏咱們網絡請求以及數據解析就搞定了.

接下來咱們開始佈局FlatList

 

到這裏咱們就實現了.若是對你有幫助,請分享給身邊的朋友.讓咱們一塊兒進步!

 我代碼以圖片的形式展現一是爲了更直觀的展現,另外一方面是推薦你們敲一遍加深印象.如需源碼請加羣,交流學習!