今天来试试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。