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

來源：懂視網責編：小采時間：2020-11-27 22:33:29

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

React Native之ListView實現九宮格效果的示例:概述在安卓原生開發中，ListView是很常用的一個列表控件，那么React Native（RN）如何實現該功能呢？我們來看一下ListView的源碼 ListView是基于ScrollView擴展得來的，所以具有ScrollView的相關屬性： dataSource：數據源，類似于安卓中我

推薦度：

點擊下載本文 文檔為doc格式

導讀React Native之ListView實現九宮格效果的示例:概述在安卓原生開發中，ListView是很常用的一個列表控件，那么React Native（RN）如何實現該功能呢？我們來看一下ListView的源碼 ListView是基于ScrollView擴展得來的，所以具有ScrollView的相關屬性： dataSource：數據源，類似于安卓中我

概述

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽： React native reac

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦