React Native之ListView實現九宮格效果
概述
在安卓原生開發中,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確認網格數量
2,設定每一個網格的寬度樣式<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'
},
3,設定contentContainerStyle相應屬性這裡需要說明下,由於ListView的預設方向是縱向的,所以需要設定ListView的contentContainerStyle屬性,新增flexDirection:‘row’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);
效果如圖(資料來源自己加)
相關推薦
React Native之ListView實現九宮格效果
概述在安卓原生開發中,ListView是很常用的一個列表控制元件,那麼React Native(RN)如何實現該功能呢?我們來看一下ListView的原始碼ListView是基於ScrollView擴充套件得來的,所以具有ScrollView的相關屬性:dataSource:
React Native 基礎 之ListView實現吸頂效果
當滑動時,這個section header會固定在頭部,也就是吸頂效果。但是遺憾的是,在Android平臺上不支援吸頂效果 實現吸頂效果需要用到此方法 cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIde
react native之listview加下拉重新整理上拉分頁
直接上程式碼 var REQUEST_URL = 'xxxx&page='; import React, { Component } from 'react'; import { AppRegistry, Image, StyleSheet, Text, Vie
Android自定義View之ListView實現時間軸效果:我只是個送快遞的。
先上效果圖: 實現時間軸的原理 listview的基本使用,相信大家都很熟悉。先在layout下新建一個xml佈局檔案,對應一個子項的listView的顯示內容。在上面的圖我們可以看到,每一項都是 有3個 textview控制元件
React-Native之ListView的3種樣式
http://www.jianshu.com/p/c52005107d81 最近在學習React-Native的ListView元件,其實ListView 相當於iOS中的tableview,當然也可以通過改變佈局來實現collectionView的樣式,和分組的tab
React-Native 之ListView
最近在摸索react-native,雖然蘋果爸爸已經在之前封殺了JSPatch,我還是抱著試一試的態度先學一個療程,畢竟,知識嘛,多學點總是好的。 其實對於js我瞭解的不多,所以一些東西給不了相應的解釋,還請見諒(ps:我的學習階段都是從模仿開始的)。後面我會
React Native之Modal實現自定義Dialog
針對普通的彈框,React Native(RN)給我們提供了有Alert,但使用侷限性很大,沒有辦法自定義,要實現自定義的彈框,我們應該如何來實現呢,這裡提供兩種方法:第一就是native本地來實現,然後暴露給RN來條用,第二就是使用元件Modal來實現,第一種方法這裡就不
React Native之ListView的講解與應用
在安卓原生開發中,ListView是很常用的一個列表控制元件,那麼React Native(RN)如何實現該功能呢,這裡簡單的講解下。 ListView.js原始碼截圖: 從原始碼中可知RN中的ListView是
React Native之Modal元件實現遮罩層效果
React-Native中Modal的使用 /** * React Native App * dongtao 2017/04/22 * @flow */ import React, { Component } from 'react'; import { A
React Native之九宮格佈局
九宮格的佈局,其實大家都耳熟能詳了,那麼如何用react native來開發九宮格佈局呢? 首先,貼上UI需求圖: 對於以上的佈局,雖然目前圖片還是很少,還是希望大家可以用最優雅的方式開發程式碼,簡潔好看,複用性也高。 開發的思想: 將圖片的所有資訊(包括URL地址,
React Native之通過createStackNavigator實現攜帶引數的頁面與頁面之間的跳轉
1 實現的功能 在網上看React Native文件,我特碼就想實現一個頁面到另外一個頁面的跳轉,然後另外一個頁面怎麼獲取引數,特麼沒找到一個說清楚的,要麼太複雜,要麼說了不理解,下面是我自己寫的一個App.js檔案,實現一個Home頁面跳到另外Details頁面,並且攜
React Native學習ListView(三):吸頂效果
Demo展示 ios.gif 之前兩篇文章ListView的學習都是展示了每一row的資料,而上面的效果圖中不僅展示了row資料,而且還帶有一個section header,當滑動時,這個section header會固定在頭部,也就是吸頂效果。但是遺憾的是,在A
React Native 之ScrollView輪播圖實現
1.首先如果檔案index.android.js 或者 index.ios.js 我這裡用的是前者 /** * Sample React Native App * https://github.com/facebook/react-native * @flow
React Native安卓實現分析之ReactInstanceManager的包裝類ReactNativeHost
上一篇提到了UI容器類ReactRootView,這一次繼續我們的分析之路 寫著一片之前,沒有看過任何其他兄弟對相關內容的分析,不是覺得自己牛逼。 是怕別人的思維影響到我的理解,如果講得不對,歡迎指出! ReactNativeHost ReactNati
react-native-page-listview使用方法(自定義FlatList/ListView下拉重新整理,上拉載入更多,方便的實現分頁)
react-native-page-listview 對ListView/FlatList的封裝,可以很方便的分頁載入網路資料,還支援自定義下拉重新整理View和上拉載入更多的View.相容高版本FlatList和低版本ListVIew.元件會根據你使用的re
React Native之學習ListView的單選以及記錄資料
var mSelectWhat = -1; var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); //當且僅當cell中的任意兩行不相等時才重新渲染\ export default class Desig
React Native之FlatList,listview的升級版
RN的0.43版終於出來了,現在大家期待已久的listview的升級版flatlist終於跟大家見面了,我也是關注了好久哦,現在將使用說明,和例子給大家簡單的講解下。http://www.jianshu.com/p/37f7a3d4f114 簡單的講解下api: fl
React Native之Touchable四組件
width font clas 容易 原生 ber 支持 cit out 一、TouchableHighlight 概念: 本組件用於封裝視圖,使其可以正確響應觸摸操作。當按下的時候,封裝的視圖的不透明度會降低,同時會有一個底層的顏色透過而被用戶看到,使得視圖變暗或變亮。
React Native之登錄界面的布局
處理器 圖片 blank 轉載 圓角 print extends cit hit 版權聲明:本文為博主原創文章,未經博主允許不得轉載。 代碼註釋比較詳細 /** * Sample React Native App * https://github.com/fa
react-native之遠程圖片修改後APP不更新
reactnative react-native react native 刷新圖片 base64今天在做客戶的項目時,有一個需求是App上要顯示遠端的圖片,而遠端的圖片有可能會更新,但圖片名不變。在react-native中,顯示圖片是用的自帶的Image組件,大家都知道react在更新組件之前都會判斷pr