React Native之ListView實現九宮格效果的示例

2019-11-19 15:55:02

字體：大中小

來源：轉載

供稿：網友

概述

在安卓原生開發中，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}        />      }     />

2，設置每一個網格的寬度樣式

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

3，設置contentContainerStyle相應屬性

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

這里需要說明下，由于ListView的默認方向是縱向的，所以需要設置ListView的contentContainerStyle屬性，添加flexDirection:‘row'。其次，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);

效果如圖（數據源自己加）