1、ScrollView组件
RN封装了Android与IOS两大操作系统提供的滚动视图组件，该组件支持RN组件View的所有属性，本身没有独有的样式设计。
1.1 ScrollView组件属性
ScrollView除了拥有View的属性外，还有以下独有属性：
1、contentContainerStyle:
用于定义组件的容器样式(容器中包括所有子组件)
2、horizontal:
布尔类型，默认为false，如果为true，滚动列表所有子组件将水平排列。
3、KeyboardDismissMode:
@字符串类型属性。
@取值可以为none,interactive,on-drag。
@决定了滑动列表中某一组件呼出了软键盘，是否允许通过拉软键盘这一动作让软键盘消失。
1.1、none是不允许
1.2、on-drag：表示在手势开始的时候，软键盘会消失。
1.3、interactive:表示键盘消失的动画会与手势交互对应，若用户向上拉，则软键盘不会消失。
注意：Android操作系统只支持none
4、onContentSizeChange:是一个回调函数，当承载ScrollView的父组件的宽高发生改变的时候会调用该方法。
5、onScroll：回调函数，在滑动时调用。
6、pagingEnable:布尔类型，默认false，当为true时，滑动组件中显示的内容在划过整数倍的宽高后会停止滑动，适合用来实现水平方向整页滑动，类似电子书界面。
7、scrollEnabled：布尔类型，为false时，将不能滑动。
8、showsHorizontalScrollIndicator与showsVerticalScrollIndicator：分别表示是否显示水平与垂直的滑动指示器，为布尔类型。
1.2 ScrollViiew组件Android专有属性
endFillColor: 为颜色类型的属性，如果ScrollView组件的宽高大于它的内容所需宽高，那么剩余的空间会渲染为指定的颜色。
1.3 ScrollView组件的公开函数
scrollTo函数：
数据结构：
{
x: aNumber, //横坐标
y:aNumber, //纵坐标
animated:aBool//是否需要动画效果
}
调用形式：aScroll.scrollTo({放入参数});
1.4 RefreshControl组件(下拉刷新)
该组件专门为ScrollView服务，当ScrollView拉动到顶部的时候，如果给该组件赋予一个RefreshControl组件，那么就会显示这个组件，就类似于下拉刷新组件，可以在此时请求网络做数据更新操作。
onRefresh: 当ScrollView拉到顶部时候，调用该方法。
refreshing: 布尔类型，当前是否刷新控制并显示刷新组件。
e.g.
<ScrollView style={styles.scrollView} onScroll={this.onScroll}
refreshControl={
<RefreshControl refreshing={true}
onRefresh={this._onRefresh}
tintColor="#ff0000"
title="加载中……"
colors={['#ff0000','#00ff00','#0000ff']}
progressBackgroundColor="#ffff00"/>
}>
</ScrollView>
1.4.1 Android平台特有的RefreshControl属性：
1、colors: 数组类型，用来指定刷新指示器的颜色，可以颜色变换。
2、enabled:是否打开刷新功能，为布尔类型。
3、progressBackgroundColor: 颜色类型，用于指定刷新指示器的背景颜色。
4、size: 为RefreshLayoutConsts.SIZE属性，用于指定刷新指示器的大小，默认为DEFAULT。
2、ListView组件
2.1 ListView组件的回调函数
1、onEndReached: 在ListView所有行都被渲染到屏幕上，并且列表被滑动到底部时候调用，无参无返回值。
2、renderFooter: 用来渲染列表底部，不接受任何参数，需要返回一个renderable组件，每一次重新渲染会调用一次。
3、renderHeader: 渲染首部，同上。
4、renderRow: 回调函数，渲染列表的每一行，接收四个参数，rowData、sectionID、rowID、highlightRow，并需要返回一个可渲染对象，四个参数分别为数据、数据ID、行号以及一个高亮显示某行的回调函数，但该函数在如今的RN当中还未被实现。
5、renderScrollComponent: 提供一个可滑动组件供List在其中渲染，默认返回一个ScrollView组件。
6、renderSectionHeader: 用于渲染某一节的头部，接收sectionData与sectionID，并返回一个可渲染组件。
7、renderSeparator: 用来在每一行下面(但如果下一行是另一节的开头则不会渲染)渲染一个分割单元，接收sectionID，rowID与adjacentRowHighlighted三个参数，返回可渲染组件。
8、onChangeVisibleRows: 回调函数，用于通知哪些行已经是可见行，哪些行的可见性已经改变，接收两个参数：visibleRows,changedRows，无需返回值，visibleRows是一个map结构，格式为{sectionID:{rowID:true|false}}，changedRows同样如此，为true时可见，反之不可见。
2.2 其他属性
1、dataSource: 是一个ListViewDataSource类型，用来描述列表数据来源。
2、 initialListSize: 定义有多少行会在挂接时被渲染。
3、onEndReachedThreshold：数值类型属性，需要结合onEndReached回调函数使用，以pt为单位。
4、pageSize: 数值类型，默认值为1，即在每一次消息循环中只有一行会被渲染。
5、removeClippedSubviews:布尔类型，无默认值，为true时，RN将会对在屏幕以外的元素不进行计算而提高滑动流畅度，该函数仍处在实验阶段。需要配合view中添加overflow:hidden实现。
e.g.
//声明DataSource的状态机变量：
this.state={
diaryListDataSource:new ListView.DataSource({rowHasChanged:(oldRow,newRow)=>{
oldRow!==newRow;
}})
//将数据源中的数据复制到DataSource中：
componentWillMount(){
if(this.props.diaryList===null){
return;
}
this.setState({
diaryListDataSource:this.state.diaryListDataSource.cloneWithRows(this.props.diaryList)
});
}
componentWillReceiveProps(nextProps){//这个函数很重要
this.setState({
diaryListDataSource:this.state.diaryListDataSource.cloneWithRows(nextProps.diaryList)//注意这里的nextProps.diaryList
});
}
//列表组件
{/*这里使用一个三元表达式进行判断*/}
{
(
(this.props.diaryList.length!==0)?
(
<ListView dataSource={this.state.diaryListDataSource} renderRow={this.renderListItem}>
</ListView>
):(
<View style={{flex:1,justifyContent:'center'}}>
<Text style={{fontSize:18}}></Text>
</View>
)
)
}
注意：ListView.DataSource类型的变量必须放置在集成React框架的Component组件的组建中生成。
2.3 列表的高级处理
1、可以将列表的每一行通过可触摸组件包裹，保证良好的UI交互效果。
2、可以在每一列中定义多个可触摸组件。
2.4 列表分段
2.4.1 声明状态机变量
//在构造函数中
状态机变量名:new ListView.DataSource({
rowHasChanged:(oldRow,newRow)=>{oldRow!==newRow},
sectionHeaderHasChanged:(oldSH,newSH)=>oldSH!==newSH
})
2.4.2 将数据源复制到DataSource中
let newListWithSection=[];
let sec1="分区1";
let sec2="分区2";
newListWithSection[sec1]=this.list;
newListWithSection[sec2]=this.list;
let fakeSections=[sec1,sec2];
this.setState(()=>{
return {listDS:this.state.listDS.closeWithRowsAndSections(newListWithSection,fakeSections)};
});
2.4.3 定义分栏、首尾栏以及列表间隔渲染：
renderSectionHeader(sectionData,sectionID);
renderHeader();
renderFooter();
renderSeparator();
<ListView
dataSource={this.props.dataSource}
renderRow={}
renderSectionHeader={}
renderSeparator={}
renderHeader={}
renderFooter={}/>
