ListView 是最適合用來顯示重複數據的一種元件，ListView 他不會一次把所有數據顯示出來，而是有在螢幕上的資料他才會顯示出來，所以在效能上會比較好。

ListView 有兩個必須的 props dataSource和renderRow。dataSource是列表的數據，而 renderRow 則是要顯示時會把需要的數據傳下去讓 dump Component 來顯示。

ListView

使用 SOP: import { ListView } from react-native;
使用範例

<ListView
  dataSource={dataSource}
  renderRow={(rowData) => <ButtonSample buttonText={rowData} />}
/>

dataSource 就是這個 List 預計要顯示的全部資料
renderRow 就是每個 ListItem 要長怎樣，可以想像成他是一個 for 迴圈遍歷整個 array 然後把值塞進去 dump Component 之中作為顯示。

完整範例

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ListView,
} from 'react-native';
import ButtonSample from './ButtonSample';

export default (props) => {
  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  const dataSource = ds.cloneWithRows([
    'Button1', 'Button2', 'Button3', 'Button4'
  ]);
  return (
    <View style={styles.center}>
      <ListView
        dataSource={dataSource}
        renderRow={(rowData) => <ButtonSample buttonText={rowData} />}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 10,
  },
  button: {
    margin: 20,
    padding: 10,
    paddingLeft: 20,
    paddingRight: 20,
    backgroundColor: '#406E9F',
    borderRadius: 9,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
  },
});

結果會長這樣

其中 rowHasChanged 也是 ListView 必須的 function 之一，這裡我們用 (r1, r2) => r1 !== r2} 讓他可以簡單的判斷輸每個 ListItem 有無變化來更改 render 的內容。

有問題歡迎來 React Native Taiwan 問喔
創科資訊