這篇文章將為大家詳細講解有關(guān)React Native中ListView如何實現(xiàn)九宮格效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)主營諸城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),諸城h5重慶小程序開發(fā)搭建,諸城網(wǎng)站營銷推廣歡迎諸城等地區(qū)企業(yè)咨詢

ListView是基于ScrollView擴展得來的，所以具有ScrollView的相關(guān)屬性：

dataSource：數(shù)據(jù)源，類似于安卓中我們傳入BaseAdapter的數(shù)據(jù)集合。

renderRow：渲染某一行，類似于BaseAdapter中的getItem方法。

onEndReached：簡單說就是用于分頁操作，在安卓中原生開發(fā)中，我們需要自己實現(xiàn)相應(yīng)的方法。

onEndReachedThreshold：調(diào)用onEndReached之前的臨界值，單位是像素。

refreshControl：指定RefreshControl組件，用于為ScrollView提供下拉刷新功能。(該屬性是繼承與ScrollView)

renderHeader：渲染頭部View，類似于安卓ListView中的addHeader.

以上的屬性基本可以解決一些常見的列表需求，如果我們想要實現(xiàn)網(wǎng)格的效果，也可以借助該組件來實現(xiàn)，有點類似于安卓中的RecyclerView控件。

pageSize:渲染的網(wǎng)格數(shù)，類似于安卓GridView中的numColumns.

contentContainerStyle:該屬性是繼承于ScrollView，主要作用于該組件的內(nèi)容容器上。

要用ListView實現(xiàn)九宮格的效果：

1，配置pageSize確認網(wǎng)格數(shù)量

<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，設(shè)置每一個網(wǎng)格的寬度樣式

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

3，設(shè)置contentContainerStyle相應(yīng)屬性

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

這里需要說明下，由于ListView的默認方向是縱向的，所以需要設(shè)置ListView的contentContainerStyle屬性，添加flexDirection:‘row'。其次，ListView在同一行顯示，而且通過flexWrap:'wrap'設(shè)置自動換行。

注：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; 
 
// 導(dǎo)入json數(shù)據(jù) 
var shareData = require('./shareData.json'); 
 
// 一些常亮設(shè)置 
const cols = 3; 
const cellWH = 100; 
const vMargin = (screenW - cellWH * cols) / (cols + 1); 
const hMargin = 25; 
 
// ES5 
var ListViewDemo = React.createClass({ 
  // 初始化狀態(tài)值(可以變化) 
  getInitialState(){ 
    // 創(chuàng)建數(shù)據(jù)源 
    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', 
    // 側(cè)軸方向 
    alignItems:'center', // 必須設(shè)置,否則換行不起作用 
  }, 
 
  innerViewStyle:{ 
    width:cellWH, 
    height:cellWH, 
    marginLeft:vMargin, 
    marginTop:hMargin, 
    // 文字內(nèi)容居中對齊 
    alignItems:'center' 
  }, 
 
  iconStyle:{ 
    width:80, 
    height:80, 
  }, 
 
}); 
 
AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);

效果如圖（數(shù)據(jù)源自己加）

關(guān)于“React Native中ListView如何實現(xiàn)九宮格效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

當前名稱：ReactNative中ListView如何實現(xiàn)九宮格效果
URL網(wǎng)址：http://aaarwkj.com/article20/jegpco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站設(shè)計、動態(tài)網(wǎng)站、域名注冊、定制開發(fā)、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)