ReactNative ListView控制元件屬性和樣式

阿新 • • 發佈：2019-01-16

基本使用方式

//建構函式中繫結資料
constructor(props) {
    super(props);
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    
    // 初始狀態
    this.state = {
        dataSource: ds.cloneWithRows(PublishData.data)
    };
}

//方法中進行資料處理，並放到控制元件位置
onBindRow(rowData){
    let content = [];
    let data = rowData.data;
    data.map((o, i) => {
        content.push(
            <View key={i}>
                <Text style={styles.text} numberOfLines={1}>{o.name}</Text>
                <Text style={styles.textDetail} numberOfLines={1}>{o.value}</Text>
            </View>
        )
    });
    
    return (
        <View style={styles.container}>
            {content}
        </View>
    )
}

//render中設定控制元件
render() {
    return (
        <View style={styles.flex}>
            <ListView
                dataSource={this.state.dataSource}
               renderRow={this.onBindRow.bind(this)}
            />
        </View>
    )
}

屬性

ScrollView 全部屬性

dataSource：

設定ListView的資料來源

initialListSize：

指定在元件剛掛載的時候渲染多少行資料。用這個屬性來確保首屏顯示合適數量的資料，而不是花費太多幀逐步顯示出來

onChangeVisibleRows：

（(visibleRows, changedRows) => void）當可見的行的集合變化的時候呼叫此回撥函式。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可見行，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有剛剛改變了可見性的行，其中如果值為true表示一個行變得可見，而為false表示行剛剛離開可視區域而變得不可見

onEndReached：

當所有的資料都已經渲染過，並且列表被滾動到距離最底部不足onEndReachedThreshold個畫素的距離時呼叫。原生的滾動事件會被作為引數傳遞。譯註：當第一次渲染時，如果資料不足一屏（比如初始值是空的），這個事件也會被觸發

onEndReachedThreshold：

呼叫onEndReached之前的臨界值，單位是畫素

pageSize：

每次事件迴圈（每幀）渲染的行數

removeClippedSubviews：

用於提升大列表的滾動效能。需要給行容器新增樣式overflow:‘hidden’。（Android已預設新增此樣式）此屬性預設開啟

renderFooter：

（() =>renderable）頁頭與頁尾會在每次渲染過程中都重新渲染（如果提供了這些屬性）。如果它們重繪的效能開銷很大，把他們包裝到一個StaticContainer或者其它恰當的結構中。頁尾會永遠在列表的最底部，而頁頭會在最頂部

renderHeader：

在每一次渲染過程中Footer(尾)該會一直在列表的底部，header(頭)該會一直在列表的頭部

renderRow：

(rowData, sectionID, rowID, highlightRow) => renderable

從資料來源(Data source)中接受一條資料，以及它和它所在section的ID。返回一個可渲染的元件來為這行資料進行渲染。預設情況下引數中的資料就是放進資料來源中的資料本身，不過也可以提供一些轉換器
如果某一行正在被高亮（通過呼叫highlightRow函式），ListView會得到相應的通知。當一行被高亮時，其兩側的分割線會被隱藏。行的高亮狀態可以通過呼叫highlightRow(null)來重置

renderScrollComponent：

(props) => renderable指定一個函式，在其中返回一個可以滾動的元件。ListView將會在該元件內部進行渲染。預設情況下會返回一個包含指定屬性的ScrollView

enderSectionHeader：

(sectionData, sectionID) => renderable

如果提供了此函式，會為每個小節(section)渲染一個粘性的標題。
粘性是指當它剛出現時，會處在對應小節的內容頂部；繼續下滑當它到達螢幕頂端的時候，它會停留在螢幕頂端，一直到對應的位置被下一個小節的標題佔據為止

renderSeparator：

(sectionID, rowID, adjacentRowHighlighted) => renderable

如果提供了此屬性，一個可渲染的元件會被渲染在每一行下面，除了小節標題的前面的最後一行。在其上方的小節ID和行ID，以及鄰近的行是否被高亮會作為引數傳遞進來

scrollRenderAheadDistance：

當一個行接近螢幕範圍多少畫素之內的時候，就開始渲染這一行

stickyHeaderIndices（只支援iOS）：

一個子檢視下標的陣列，用於決定哪些成員會在滾動之後固定在螢幕頂端。舉個例子，傳遞stickyHeaderIndices={[0]}會讓第一個成員固定在滾動檢視頂端。這個屬性不能和horizontal={true}一起使用