本文純原創(chuàng)，純手打，請大神多多指教。轉載請注明出處涕滋！
react-native版本：0.48;? 開發(fā)環(huán)境win10+VScode;? 目標平臺：安卓(暫時沒有適配蘋果);? 最后更新時間：2017.09.11;
本文我又把編輯器改成MD重新發(fā)布了，建議瀏覽新地址 http://www.reibang.com/p/a787d9af2401?
在ReactNative净神，想做個Android中分組GridView的效果何吝，搜索了半天沒找到解決辦法，于是自己瞎摸索出來了一套效果鹃唯，目前就是用SectionList嵌套FlatList爱榕，但是這肯定不是最優(yōu)的方法，還請大神指點
先看下效果圖
1. 數據格式
var data0={name:'外勤簽到',img:Images.oaWQQD,onPress:()=>alert('跳轉頁面----外勤簽到') }
var data1={name:'考勤打卡',img:Images.oaKQDK}
var data2={name:'審批',img:Images.oaSP}
var data3={name:'日志',img:Images.oaRZ}
OAData.push(data0)
OAData.push(data1)
OAData.push(data2)
var AllMenu2=[
{key:0,title:'辦公',data:OAData},
{key:1,title:'營銷',data:YXData},
]
2.代碼
源代碼地址：https://github.com/MyPublicGitHub/Test.git
import React from'react'
import{
??? StyleSheet,View,Image,Text,TouchableOpacity,ToastAndroid,
??? SectionList,FlatList
}from'react-native'
import Images from'../images/ImageList'
import Api from'../api/Api'
import GV from'../utils/GlobalVariable'
import * as Progress from'react-native-progress';
var AllMenu=[];
var Dimensions=require('Dimensions');//獲取屏幕的寬高
var ScreenWidth=Dimensions.get('window').width;
var ScreenHeight=Dimensions.get('window').height;
class WorksView extends React.Component{
??? constructor(props) {
??????? super(props);
??????? this.state={
??????????? isLoading:false,
??????? };
????? }
????? static navigationOptions={
???? ? ? ?? headerTitle:工作臺,
???? ? ? ? headerLeft:null,
??? ? ? ?? headerStyle:{
????? ? ???? ? ?? height:40,
??????? ? ? }?
????? }
componentDidMount() {
???????? this._getModuleDefault()
}
_getModuleDefault() {
????????? if(GV.ACCESS_TOKEN!=='') {
???????????????? var url='網絡地址';
???? ? ?????????? var header={
????????????????? method:'get',
????????? }
???? ? ? ? this.setState({
???????????????? isLoading:true
?????????? })
?????????? fetch(url,header)
??????????? .then((response)=>{
?????????????????? return response.json()
???????????? })
??????????? .then((responseJson)=>{
??????????????????? if(responseJson.statusCode=='0000') {
?????????????????????????? ToastAndroid.show('成功',ToastAndroid.SHORT);
????????????????????????? this._initItem(responseJson.returnData);
???????????????????? }else{
??????????????????????????? ToastAndroid.show('失斊禄拧：'+responseJson.statusDesc,ToastAndroid.SHORT);
???????????????????? }
????????????????????? this.setState({
???????????????????????????? isLoading:false
???????????????????? })
??????????????? })
????????????? .catch((error)=>{
?????????????????????? alert(error)
????????????????????? this.setState({
???????????????????????????? isLoading:false
????????????????????? })
?????????????? })
???? }
}
_renderItem=({info})=>null
_renderSectionHeader=({section})=>
? ? ? <View>
???????????
render() {
return(
this.state.isLoading?
正在加載...
:
style={styles.background}
renderSectionHeader={this._renderSectionHeader}
renderItem={this._renderItem}
sections={AllMenu}
/>
)
}
_initItem(returnData) {
var OAData=[]
var YXData=[]
var CGData=[]
var TJData=[]
//OA模塊數據是固定的
var data0={name:'外勤簽到',img:Images.oaWQQD,onPress:()=>alert('外勤簽到') }
var data1={name:'考勤打卡',img:Images.oaKQDK}
var data2={name:'審批',img:Images.oaSP}
var data3={name:'日志',img:Images.oaRZ}
var data4={name:'任務',img:Images.oaRW}
var data5={name:'公告',img:Images.oaGG}
var data6 ={name:'證書',img:Images.oaZS}
var data7={name:'印章',img:Images.oaYZ}
var data8={name:'資產',img:Images.oaZC}
var data9={name:'車輛',img:Images.oaCL}
//把數據添加到辦公子模塊
OAData.push(data0)
OAData.push(data1)
OAData.push(data2)
OAData.push(data3)
OAData.push(data4)
OAData.push(data5)
OAData.push(data6)
OAData.push(data7)
OAData.push(data8)
OAData.push(data9)
//循環(huán)找出擁有權限的模塊
for(varindex=0;index
var element=returnData[index];
var menuId=element.menuId;
if(menuId==16) {
YXData.push({name:'項目信息',img:Images.yxXMXY})
}
if(menuId==17) {
YXData.push({name:'營銷任務',img:Images.yxYXRW})
}
if(menuId==18) {
YXData.push({name:'同行分析',img:Images.yxTHFX})
}
if(menuId==19) {
YXData.push({name:'投標管理',img:Images.yxTBGL})
}
if(menuId==20) {
YXData.push({name:'業(yè)績PK',img:Images.yxYJPK})
}
if(menuId==21) {
YXData.push({name:'客戶看板',img:Images.yxKHKB})
}
//采購
if(menuId==29) {
CGData.push({name:'供應商',img:Images.cgGYS})
}
if(menuId==30) {
CGData.push({name:'物資采購',img:Images.cgWZCG})
}
if(menuId==31) {
CGData.push({name:'供應商評價',img:Images.cgGYSPJ})
}
if(menuId==32) {
CGData.push({
name:'供應商往來',img:Images.cgGYSWL,onPress:()=>alert('供應商往來')
})
}
//統(tǒng)計
if(menuId==8) {
TJData.push({name:'管理統(tǒng)計',img:Images.tjGLTJ})
TJData.push({name:'項目統(tǒng)計',img:Images.tjXMTJ})
}
}
var OAMenu={key:0,title:'辦公',data:OAData}//把辦公子模塊添加到辦公模塊
var YXMenu={key:1,title:'營銷',data:YXData}//把營銷子模塊添加到營銷模塊
var CGMenu={key:2,title:'采購',data:CGData}//把采購子模塊添加到采購模塊
var TJMenu={key:3,title:'統(tǒng)計',data:TJData}//把統(tǒng)計子模塊添加到統(tǒng)計模塊
AllMenu.push(OAMenu);//講辦公添加到模塊集合
AllMenu.push(YXMenu);//講營銷添加到模塊集合
AllMenu.push(CGMenu);//講采購添加到模塊集合
AllMenu.push(TJMenu);//講統(tǒng)計添加到模塊集合
}
}
conststyles=StyleSheet.create({
load:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
background:{
flex:1,
backgroundColor:'white'
},
viewItemHeader:{
flex:1,
backgroundColor:'#eeeeee',
alignItems:'center',
paddingLeft:20,
paddingTop:5,
paddingBottom:5,
},
viewRow:{
// flexDirection: 'row',//設置橫向布局
justifyContent:'center',
alignItems:'center',
width:ScreenWidth/4,
padding:10,
},
imageItem:{
height:40,
width:40,
},
textItem:{
textAlignVertical:'center',
color:'#5C5C5C',
fontSize:12,
},
flastList:{
},
})
export defaultWorksView
3.總結
簡書還是不智能黔酥，復制的代碼 全部去掉看空格，我已經優(yōu)化了一下洪橘，可能有的地方報錯跪者，需要補空格。
我在代碼中沒有用到SectionList中的keyExtractor屬性熄求，可能有些地方會報黃色警告渣玲，建議大家把文中的title字段作為key。
關于SectionList的屬性請到ReactNative中文網?了解
4.遇到的坑
4.1 如果把FlatList寫到renderIten方法中會出現這樣的情況
我猜測弟晚，這種情況是因為數據格式不對導致的忘衍，renderItem方法的參數是(info: {item: Item, index: number}) => ?所以參數全部都是數組中的對象信息（本文中是：{name:'營銷任務',img:Images.yxYXRW}）但是，FlatList需要的數據格式是整個條目的數組
4.2 如果直接在renderItem中返回子條目
如果按照常規(guī)的邏輯卿城，我們大概會這樣寫枚钓，寫出來的效果比較適合做通訊錄等，每個item占用一行瑟押。而不能把item 進行Z型排列;這是系統(tǒng)默認的效果搀捷，我在這個基礎上摸索了半天 沒處理好，還請大神指點
效果是這樣的
