▲点击上方“CocoaChina”关注即可免费学习 iOS 开发
来源：王亟亟的大牛之路
ScrollView
在iOS/Android都有一样的实现，使得有限的屏幕里有着无限的拓展空间，同样的有2种模式,水平和垂直。
我们来看下官方竖直方向的例子：
import React, { Component } from 'react';
import{ AppRegistry, ScrollView, Image, Text, View } from 'react-native'
class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
render() {
return(
Scroll me plz
If you like
Scrolling down
What's the best
Framework around?
React Native
);
}
}
AppRegistry.registerComponent(
'IScrolledDownAndWhatHappenedNextShockedMe',
() => IScrolledDownAndWhatHappenedNextShockedMe);
和我们的理解类似，他是一个可拉伸的师徒，当内容超过一屏幕时，通过操作滑动/方法调用无论多长，多大的内容都会被展现出来。
![]()
ListView
这是一个垂直的滚动的列表，每个Item 样式/结构类似，主要差异只是数据源的区别。
ListView和ScrollView有2个比较大的差异
ListView在创建之初并不立即渲染所有元素，而是优先渲染屏幕上可见的元素,ScrollView是全部渲染。
ListView内部的控件是有规律的，而ScrollView并没有（其实就是 有没有 item的概念）
ListView有2个必备的属性分别是 dataSource，renderRow
renderRow 对应UI组件
dataSource 对应数据源
我们来看下 官方提供的Sample效果：
![]()
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class ListViewBasics extends Component {
// Initialize the hardcoded data
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
dataSource={this.state.dataSource}
renderRow={(rowData) => {rowData}}
/>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);
在构造函数中用 rowHasChanged回调监听item的变化。state初始化数据源，每一行为一个,并进行赋值
如何初始化，实例化一个基础的ListView?
需要以下几步：
创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组
使用数据源来实例化一个ListView组件
定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件作为每一行的Item
RN给与我们丰富的API让我们可以给 ListView添加 foot 和 header,包括一系列丰富的回调函数，诸如在到达列表尾部的时候调用回调函数(onEndReached)，还有在视野内可见的数据变化时调用回调函数(onChangeVisibleRows)，以及一些性能方面的优化。
还有诸如局部刷新的 rowHasChanged函数 以及渲染控制等等。
API属性/方法：
ScrollView props…
因为在RN中ListView继承于 ScrollView 所以ListView拥有ScrollView的所有属性。
dataSource ListViewDataSource
列表依赖的数据源
initialListSize number
在组件初始化的时候渲染多少行数据，有助于性能提升
onChangeVisibleRows function
(visibleRows, changedRows) => void
当可见的item的集合变化的时候调用此回调函数。
onEndReached function
当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用,初始化时如果没数据也会被调用。
onEndReachedThreshold number
调用onEndReached之前的临界值，单位是像素。
pageSize number
每次事件循环（每帧）渲染的行数。
▼
![]()
小编推荐：[掘金]是一个高质量的技术社区，从 Swift 到 React Native，性能优化到动效源码，让你不错过 iOS 开发的每一个技术干货。长按图片二维码识别或者各大应用市场搜索「掘金」，技术干货尽在掌握中。
微信号：CocoaChinabbs
![]()
▲长按二维码“识别”关注即可免费学习 iOS 开发
月薪十万、出任CEO、赢娶白富美、走上人生巅峰不是梦
--------------------------------------
商务合作QQ：2408167315
投稿邮箱：[email protected]
