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

 

到这里咱们就实现了.若是对你有帮助,请分享给身边的朋友.让咱们一块儿进步!

 我代码以图片的形式展现一是为了更直观的展现,另外一方面是推荐你们敲一遍加深印象.如需源码请加群,交流学习!