概述

在安卓原生開發中，ListView是很常用的一個列表控制元件，那麼React Native（RN）如何實現該功能呢？我們來看一下ListView的原始碼

ListView是基於ScrollView擴充套件得來的，所以具有ScrollView的相關屬性：

dataSource：資料來源，類似於安卓中我們傳入BaseAdapter的資料集合。
renderRow：渲染某一行，類似於BaseAdapter中的getItem方法。
onEndReached：簡單說就是用於分頁操作，在安卓中原生開發中，我們需要自己實現相應的方法。
onEndReachedThreshold：呼叫onEndReached之前的臨界值，單位是畫素。
refreshControl：指定RefreshControl元件，用於為ScrollView提供下拉重新整理功能。(該屬性是繼承與ScrollView)
renderHeader：渲染頭部View，類似於安卓ListView中的addHeader.

以上的屬性基本可以解決一些常見的列表需求，如果我們想要實現網格的效果，也可以藉助該元件來實現，有點類似於安卓中的RecyclerView控制元件。
pageSize:渲染的網格數，類似於安卓GridView中的numColumns.
contentContainerStyle:該屬性是繼承於ScrollView，主要作用於該元件的內容容器上。

要用ListView實現九宮格的效果：

1，配置pageSize確認網格數量

<ListView  
      automaticallyAdjustContentInsets={false}  
      contentContainerStyle={styles.grid}  
      dataSource={this.state.dataSource}  
      renderRow={this.renderRow.bind(this)}  
      pageSize={3}  
      refreshControl={  
         <RefreshControl  
           onRefresh={this.onRefresh.bind(this)}  
           refreshing={this.state.isLoading}  
           colors={['#ff0000', '#00ff00', '#0000ff']}  
           enabled={true}  
           />  
       }  
      /> 
 

itemLayout:{  
   flex:1,  
   width:Util.size.width/3,  
   height:Util.size.width/3,  
   alignItems:'center',  
   justifyContent:'center',  
   borderWidth: Util.pixel,  
   borderColor: '#eaeaea'  
 },  

grid: {  
   justifyContent: 'space-around',  
   flexDirection: 'row',  
   flexWrap: 'wrap'  
 }, 
 

其次，ListView在同一行顯示，而且通過flexWrap:’wrap’設定自動換行。

注：flexWrap屬性：wrap、nowrap，wrap：空間不足的情況下自動換行，nowrap:空間不足，壓縮容器，不會自動換行。

以下是完整程式碼：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity, // 不透明觸控
    AlertIOS
} from 'react-native';

// 獲取螢幕寬度
var Dimensions = require('Dimensions');
const screenW = Dimensions.get('window').width;

// 匯入json資料
var shareData = require('./shareData.json');

// 一些常亮設定
const cols = 3;
const cellWH = 100;
const vMargin = (screenW - cellWH * cols) / (cols + 1);
const hMargin = 25;

// ES5
var ListViewDemo = React.createClass({
    // 初始化狀態值(可以變化)
    getInitialState(){
        // 建立資料來源
        var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
       return{
           dataSource:ds.cloneWithRows(shareData.data)
       }
    },

    render(){
        return(
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                contentContainerStyle={styles.listViewStyle}
            />
        );
    },

    // 返回cell
    renderRow(rowData){
        return(
            <TouchableOpacity activeOpacity={0.8} onPress={()=>{AlertIOS.alert('點選了')}} >
                <View style={styles.innerViewStyle}>
                    <Image source={{uri:rowData.icon}} style={styles.iconStyle} />
                    <Text>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        );
    },
});

const styles = StyleSheet.create({
    listViewStyle:{
        // 主軸方向
        flexDirection:'row',
        // 一行顯示不下,換一行
        flexWrap:'wrap',
        // 側軸方向
        alignItems:'center', // 必須設定,否則換行不起作用
    },

    innerViewStyle:{
        width:cellWH,
        height:cellWH,
        marginLeft:vMargin,
        marginTop:hMargin,
        // 文字內容居中對齊
        alignItems:'center'
    },

    iconStyle:{
        width:80,
        height:80,
    },

});

AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);