ReactNative基础（四）了解ListView的使用、实现GridView效果、编写一个真实网络请求案例

作者：阿钟

博客：http://blog.csdn.net/a_zhon

此博客基于react-native-0.48.4

ListView简介

一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）

• ListView文档同时它还有个离不开的ListView.DataSource就好比在Android中的Adapter

• 虽然现在这个组件已经过期，官方建议使用FlatList或SectionList代替

• 当是我们还是得来学习一下，毕竟以后搞项目遇到了不会一脸懵逼。

  
  

  
  

现在来实现一个最简单的列表

效果图：

• 首先创建一个MyListView.js组件并创建好数据源

• 创建我们的测试数据

• ItemData这个拿Java来说就是一实体类Bean对象

经过上面三步，我们的ListView.DataSource数据源就创建好了，接下来就是对数据进行展示了。

数据的展示 Item布局渲染

• 重点就在这个renderRow函数了，渲染每一个Item进行数据展示

• renderRow中可以使用的参数(rowData, sectionID, rowID, highlightRow),具体的使用可以参照官方文档

• rowData也就是我们一开始初始化好的数据ItemData实例

• 在Item的最外层套了一层TouchableOpacity用来实现Item的点击事件

• 使用ListView也就三步：定义ListView.DataSource构造数据源、编写ListViwe、实现renderRow编写Item样式。

当然通过ListView可以实现一个GridView效果，只需要修改一下ListView的主轴方向即可；创建数据源之类操作和上面一样

• pageSize当为横向的时候需要指定这个属性，值就为你要显示数据的大小（暂时不知道为什么要这样，先记录下）

• 当列表为水平方向且包裹内容时，要达到GridView效果我们需要自己计算每个Item的宽度并且平分屏幕的宽度就可以了。

获取屏幕的宽度，并计算出每一个Item的宽度

有了宽度我们就需要修改每个Item的宽度和其他样式了，如下：

效果图： 

GridView源码看这里：

https://github.com/azhon/ReactNative/blob/master/UseListView/src/gridView.js

讲到这里ListView控件的基本使用相信大家已经掌握了,那我们就来写个真实的案例，从服务器请求json数据并通过ListView列表展示。

万物基于效果图：

这里就涉及我们的网络请求和json数据处理来，不过也是很简单的。先来说说第一部分请求网络数据

• 可以先看下源码源码在这里，在看这里。

• 使用fetch()请求接口，我们可以先看下官方的文档网络

• 我们先来定义我们要请求的接口地址

• 同时初始化好我们的数据源,此时并没有数据所以知识先创建来一个对象；待会请求到了数据直接往里面放就可以了。

• 请求数据就只需要在组件渲染完成即可

来看下返回的数据格式，这样结合代码会更加的直观

var json = response['stories'];这样就拿到了stories里面的所有数据并且是个数组，数组的每个元素里面有有images数组、type、id、ga_prefix、title 也就是下面我们用到的RowData

有了数据源就需要在渲染Item的时候设置在文本上了，展示出来：

个人觉得js上解析json真的是神奇，一个var 遍历定义所有类型很是舒服；哈哈哈…

上面所写的源码点这里UseListView：

https://github.com/azhon/ReactNative/tree/master/UseListView

一命二运三风水，四修阴德五读书！

刘桂林

微信号 : Android_LiuGuiLin

新浪微博：@刘某人程序员