1、ScrollView組件

RN封裝了Android與IOS兩大操作系統(tǒng)提供的滾動(dòng)視圖組件，該組件支持RN組件View的所有屬性，本身沒(méi)有獨(dú)有的樣式設(shè)計(jì)。

1.1 ScrollView組件屬性

ScrollView除了擁有View的屬性外，還有以下獨(dú)有屬性：
1、contentContainerStyle:
用于定義組件的容器樣式(容器中包括所有子組件)
2、horizontal:
布爾類(lèi)型，默認(rèn)為false，如果為true，滾動(dòng)列表所有子組件將水平排列。
3、KeyboardDismissMode:
@字符串類(lèi)型屬性。
@取值可以為none,interactive,on-drag。
@決定了滑動(dòng)列表中某一組件呼出了軟鍵盤(pán)，是否允許通過(guò)拉軟鍵盤(pán)這一動(dòng)作讓軟鍵盤(pán)消失。
1.1、none是不允許
1.2、on-drag：表示在手勢(shì)開(kāi)始的時(shí)候，軟鍵盤(pán)會(huì)消失。
1.3、interactive:表示鍵盤(pán)消失的動(dòng)畫(huà)會(huì)與手勢(shì)交互對(duì)應(yīng)，若用戶向上拉，則軟鍵盤(pán)不會(huì)消失。

注意：Android操作系統(tǒng)只支持none

4、onContentSizeChange:是一個(gè)回調(diào)函數(shù)，當(dāng)承載ScrollView的父組件的寬高發(fā)生改變的時(shí)候會(huì)調(diào)用該方法。

5、onScroll：回調(diào)函數(shù)，在滑動(dòng)時(shí)調(diào)用。

6、pagingEnable:布爾類(lèi)型，默認(rèn)false，當(dāng)為true時(shí)，滑動(dòng)組件中顯示的內(nèi)容在劃過(guò)整數(shù)倍的寬高后會(huì)停止滑動(dòng)，適合用來(lái)實(shí)現(xiàn)水平方向整頁(yè)滑動(dòng)，類(lèi)似電子書(shū)界面。

7、scrollEnabled：布爾類(lèi)型，為false時(shí)，將不能滑動(dòng)。

8、showsHorizontalScrollIndicator與showsVerticalScrollIndicator：分別表示是否顯示水平與垂直的滑動(dòng)指示器，為布爾類(lèi)型。

1.2 ScrollViiew組件Android專(zhuān)有屬性

endFillColor: 為顏色類(lèi)型的屬性，如果ScrollView組件的寬高大于它的內(nèi)容所需寬高，那么剩余的空間會(huì)渲染為指定的顏色。

1.3 ScrollView組件的公開(kāi)函數(shù)

scrollTo函數(shù)：

數(shù)據(jù)結(jié)構(gòu)：

{
x: aNumber, //橫坐標(biāo)
y:aNumber, //縱坐標(biāo)
animated:aBool//是否需要?jiǎng)赢?huà)效果
}

調(diào)用形式：aScroll.scrollTo({放入?yún)?shù)});

1.4 RefreshControl組件(下拉刷新)

該組件專(zhuān)門(mén)為ScrollView服務(wù)，當(dāng)ScrollView拉動(dòng)到頂部的時(shí)候，如果給該組件賦予一個(gè)RefreshControl組件，那么就會(huì)顯示這個(gè)組件，就類(lèi)似于下拉刷新組件，可以在此時(shí)請(qǐng)求網(wǎng)絡(luò)做數(shù)據(jù)更新操作。
onRefresh: 當(dāng)ScrollView拉到頂部時(shí)候，調(diào)用該方法。
refreshing: 布爾類(lèi)型，當(dāng)前是否刷新控制并顯示刷新組件。

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平臺(tái)特有的RefreshControl屬性：

1、colors: 數(shù)組類(lèi)型，用來(lái)指定刷新指示器的顏色，可以顏色變換。
2、enabled:是否打開(kāi)刷新功能，為布爾類(lèi)型。
3、progressBackgroundColor: 顏色類(lèi)型，用于指定刷新指示器的背景顏色。
4、size: 為RefreshLayoutConsts.SIZE屬性，用于指定刷新指示器的大小，默認(rèn)為DEFAULT。

2、ListView組件

2.1 ListView組件的回調(diào)函數(shù)

1、onEndReached: 在ListView所有行都被渲染到屏幕上，并且列表被滑動(dòng)到底部時(shí)候調(diào)用，無(wú)參無(wú)返回值。
2、renderFooter: 用來(lái)渲染列表底部，不接受任何參數(shù)，需要返回一個(gè)renderable組件，每一次重新渲染會(huì)調(diào)用一次。
3、renderHeader: 渲染首部，同上。
4、renderRow: 回調(diào)函數(shù)，渲染列表的每一行，接收四個(gè)參數(shù)，rowData、sectionID、rowID、highlightRow，并需要返回一個(gè)可渲染對(duì)象，四個(gè)參數(shù)分別為數(shù)據(jù)、數(shù)據(jù)ID、行號(hào)以及一個(gè)高亮顯示某行的回調(diào)函數(shù)，但該函數(shù)在如今的RN當(dāng)中還未被實(shí)現(xiàn)。
5、renderScrollComponent: 提供一個(gè)可滑動(dòng)組件供List在其中渲染，默認(rèn)返回一個(gè)ScrollView組件。
6、renderSectionHeader: 用于渲染某一節(jié)的頭部，接收sectionData與sectionID，并返回一個(gè)可渲染組件。
7、renderSeparator: 用來(lái)在每一行下面(但如果下一行是另一節(jié)的開(kāi)頭則不會(huì)渲染)渲染一個(gè)分割單元，接收sectionID，rowID與adjacentRowHighlighted三個(gè)參數(shù)，返回可渲染組件。
8、onChangeVisibleRows: 回調(diào)函數(shù)，用于通知哪些行已經(jīng)是可見(jiàn)行，哪些行的可見(jiàn)性已經(jīng)改變，接收兩個(gè)參數(shù)：visibleRows,changedRows，無(wú)需返回值，visibleRows是一個(gè)map結(jié)構(gòu)，格式為{sectionID:{rowID:true|false}}，changedRows同樣如此，為true時(shí)可見(jiàn)，反之不可見(jiàn)。

2.2 其他屬性

1、dataSource: 是一個(gè)ListViewDataSource類(lèi)型，用來(lái)描述列表數(shù)據(jù)來(lái)源。
2、 initialListSize: 定義有多少行會(huì)在掛接時(shí)被渲染。
3、onEndReachedThreshold：數(shù)值類(lèi)型屬性，需要結(jié)合onEndReached回調(diào)函數(shù)使用，以pt為單位。
4、pageSize: 數(shù)值類(lèi)型，默認(rèn)值為1，即在每一次消息循環(huán)中只有一行會(huì)被渲染。
5、removeClippedSubviews:布爾類(lèi)型，無(wú)默認(rèn)值，為true時(shí)，RN將會(huì)對(duì)在屏幕以外的元素不進(jìn)行計(jì)算而提高滑動(dòng)流暢度，該函數(shù)仍處在實(shí)驗(yàn)階段。需要配合view中添加overflow:hidden實(shí)現(xiàn)。

e.g.

//聲明DataSource的狀態(tài)機(jī)變量：
this.state={
      diaryListDataSource:new ListView.DataSource({rowHasChanged:(oldRow,newRow)=>{
        oldRow!==newRow;
      }})

//將數(shù)據(jù)源中的數(shù)據(jù)復(fù)制到DataSource中：
componentWillMount(){
    if(this.props.diaryList===null){
      return;
    }
    this.setState({
      diaryListDataSource:this.state.diaryListDataSource.cloneWithRows(this.props.diaryList)
    });
  }

  componentWillReceiveProps(nextProps){//這個(gè)函數(shù)很重要
    this.setState({
      diaryListDataSource:this.state.diaryListDataSource.cloneWithRows(nextProps.diaryList)//注意這里的nextProps.diaryList
    });
  }

//列表組件
{/*這里使用一個(gè)三元表達(dá)式進(jìn)行判斷*/}
      {
        (
          (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類(lèi)型的變量必須放置在集成React框架的Component組件的組建中生成。

2.3 列表的高級(jí)處理

1、可以將列表的每一行通過(guò)可觸摸組件包裹，保證良好的UI交互效果。
2、可以在每一列中定義多個(gè)可觸摸組件。

2.4 列表分段

2.4.1 聲明狀態(tài)機(jī)變量

//在構(gòu)造函數(shù)中
狀態(tài)機(jī)變量名:new ListView.DataSource({
rowHasChanged:(oldRow,newRow)=>{oldRow!==newRow},
sectionHeaderHasChanged:(oldSH,newSH)=>oldSH!==newSH
})

2.4.2 將數(shù)據(jù)源復(fù)制到DataSource中

let newListWithSection=[];
let sec1="分區(qū)1";
let sec2="分區(qū)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={}/>