1.6ScrollView与ListView

今天来试试ScrollView。

http://reactnative.cn/docs/0.44/using-a-scrollview.html#content

然后把官方代码粘进去

我的文件目录

然后run

巨大啊。

在这里我们顺便试试Image的几种图片效果

看看效果

 

然后再来看看官网上的说法：

ScrollView适合用来显示数量不多的滚动元素。放置在ScollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的ListView组件。

就是说ScrollView只是适合用来显示少量的拖动的元素，大量的还是应该学习ListView。那下面还是先看看ListView。

 

 

ListView:

http://reactnative.cn/docs/0.44/using-a-listview.html#content

第一眼看到感觉不太好吧，又多了两个啥东西：

dataSource和renderRow

感觉远没有ScrollView简单易用。但是因为ListView的天生属性：

ListView并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

这注定了长数据上必定要用ListView来优化性能啊，想想做出一个高性能的APP，辛苦一下还是值得的。

首先来看看 dataSource：就是数据源嘛。比如你有一个列表需要显示1,2,3,4,5；那么你的数据源里面就是1,2,3,4,5。

然后看看renderRow：渲染的方法，也就是将数据怎么展示出来。比如官网上的做法是用一个Text把从dataSource里面拿到的数据显示出来，简单！

所以代码上的做法就是：

把这么一串数据塞到dataSource里面。

有点好奇这串数据是怎么放的，然后ctrl+鼠标左键点cloneWithRows查看里面源码：

不过大概可以看出他是有一个数组来存放任意类型的数据，然后返回一个ListViewDataSource的数据类型给我们。

然后：

就是从state里面拿到dataSource赋值，再把其中每个元素显示出来。

然后上面还有个地方：

这里是定义了一个ListView的DataSource类型的数据，然后再通过ds.cloneWithRows生成数据放在state的dataSource里。然后看这一句：

new ListView.DataSource({rowHasChanged: (r1, r2) => r1!== r2})

官网解释是：rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据（===符号只比较基本类型数据的值，和引用类型的地址）来判断某行数据是否变化了。

感觉比较模糊，再百度一下：

原来是在值改变时才刷新该数据，这样可以节省消耗。

 

然后看着这个ListView，感觉就这么简单过了有点说不过去，试试给他修改一下数据源DataSource试试。

触发事件我用了个Button来触发：

参考（http://reactnative.cn/docs/0.44/button.html#content）

 

然后点击事件写在：

 

这里出现了一个新东西，componentWillMount()，这个待会再解释，先看看效果：

点击按钮CHANGE

顺利完成！（其实不是太顺利，自己先不看，去踩下坑就知道了）

再来看看componentWillMount()：

先百度一下，哇，还涉及了生命周期，这下有得玩了。

我参考的文章是http://blog.csdn.net/ElinaVampire/article/details/51813677

 

文章还对componentDidMount进行了介绍：

从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者setInterval，或者发起网络请求。

那我们试试把刚刚的点击事件放在componentDidMount里执行：

结果：

错误提示是说render里面找不到OnButtonPress方法。

其实这也是从侧面验证了这个生命周期。

必须先在componentWillMount定义了，render才能使用它。

至于下部分生命周期大概就是在state和props改变的时候，界面刷新的生命周期。比如界面刷新前会执行一个方法（componentWillUpdate），刷新时执行

一个方法（render），刷新完成后执行一个方法（componentDidUpdate）。

OK。