廢話不多說先來看看效果：
1.前言
? ? ? ?最近公司有一個(gè)新需求。有子項(xiàng)的能展開與收縮，沒有子項(xiàng)的之前顯示主項(xiàng)。顯示主項(xiàng)FlatList這個(gè)總所周知。但是在這里面展開與收縮，代碼不難寫，但是性能方面呢，要不就是卡頓要么就是隱隱約約的延遲效果。有好多人也嘗試用SectionList，本人也嘗試過，但是還是出現(xiàn)卡頓與延遲。在github，以及開源中國上，google上查了一遍，跑了很多人寫的demo，都存在這個(gè)問題。廢話不多說開始看代碼
2.解決問題的關(guān)鍵
? ? ? 關(guān)鍵在于展開與收縮的實(shí)現(xiàn)，平常的寫代碼，或者加動畫，也不能完全掩蓋性能的問題。通過在github上查閱react-native-ui的開源庫，找到了native-base這個(gè)庫，地址：https://github.com/GeekyAnts/NativeBase。通過查閱組建庫，發(fā)現(xiàn)了一個(gè)叫Accordion這個(gè)控件，發(fā)現(xiàn)展開與收縮，效果極佳，性能優(yōu)越。
緊接著，通過FlatList中的renderRow方法讓每一項(xiàng)都是Accordion，是不是效果就能實(shí)現(xiàn)。
通過嘗試，目前已經(jīng)得以解決，至于這個(gè)Accordion的header與content，則可以通過Accordion的renderHeader和renderContent進(jìn)行自定義。
3.需求解決
? ?需求一：列表分組展開收縮卡頓問題解決
? 需求二：有子item的展示，沒有的顯示header，代碼邏輯自己書寫，這個(gè)不難實(shí)現(xiàn)吧。
4.完整代碼
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component}from 'react';
import {Image, TouchableOpacity}from 'react-native'
import {Container, Header, Content, Accordion, View, Text, Icon, List, ListItem}from 'native-base'
const dataArray = [
{"title":"測試-1", children: []},
? ? {
"title":"測試-2", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-3", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-4", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-5", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-6", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-7", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-8", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-8", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {"title":"測試-1", children: []},
? ? {
"title":"測試-2", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-3", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-4", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-5", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-6", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-7", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-8", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
},
? ? {
"title":"測試-8", children: [
{"title":"一層"},
? ? ? ? ? ? {"title":"二層"},
? ? ? ? ]
}
]
export default class Appextends Component<{}> {
_renderHeader(item, expanded) {
if (item.children.length ==0) {
return (
<TouchableOpacity activeOpacity={0.8}style={{
height:40,
? ? ? ? ? ? ? ? ? ? flexDirection:'row',
? ? ? ? ? ? ? ? ? ? alignItems:'center',
? ? ? ? ? ? ? ? ? ? borderBottomWidth:1,
? ? ? ? ? ? ? ? ? ? borderBottomColor:'#D7D7D7',
? ? ? ? ? ? ? ? ? ? paddingLeft:0
? ? ? ? ? ? ? ? }}>
? ? ? ? ? ? ? ? ? ? <Image source={require('./imgs/circle_small.png')}
style={{width:32, height:32}}/>
? ? ? ? ? ? ? ? ? ? <Text>{item.title}
? ? ? ? ? ? ? ? ? ? <Image source={require('./imgs/arrow_right.png')}
style={{width:20, height:20, position:'absolute', right:6}}/>
? ? ? ? ? ? )
}else {
return (
<View style={{
height:40,
? ? ? ? ? ? ? ? ? ? flexDirection:'row',
? ? ? ? ? ? ? ? ? ? alignItems:'center',
? ? ? ? ? ? ? ? ? ? borderBottomWidth:1,
? ? ? ? ? ? ? ? ? ? borderBottomColor:'#D7D7D7',
? ? ? ? ? ? ? ? ? ? paddingLeft:6
? ? ? ? ? ? ? ? }}>
? ? ? ? ? ? ? ? ? ? <Image source={require('./imgs/triangle_right.png')}
style={{width:20, height:20}}/>
? ? ? ? ? ? ? ? ? ? <Text>{item.title}
? ? ? ? ? ? )
}
}
_renderContent(rowItem) {
return (
<List dataArray={rowItem.children}renderRow={(item) =>
<TouchableOpacity activeOpacity={0.8}style={{
height:40,
? ? ? ? ? ? ? ? ? ? flexDirection:'row',
? ? ? ? ? ? ? ? ? ? alignItems:'center',
? ? ? ? ? ? ? ? ? ? borderBottomWidth:1,
? ? ? ? ? ? ? ? ? ? borderBottomColor:'#D7D7D7',
? ? ? ? ? ? ? ? ? ? paddingLeft:20
? ? ? ? ? ? ? ? }}>
? ? ? ? ? ? ? ? ? ? <Image source={require('./imgs/circle_small.png')}
style={{width:32, height:32}}/>
? ? ? ? ? ? ? ? ? ? <Text>{item.title}
? ? ? ? ? ? ? ? ? ? <Image source={require('./imgs/arrow_right.png')}
style={{width:20, height:20, position:'absolute', right:6}}/>
? ? ? ? ? ? }/>
? ? ? ? )
}
render() {
return (
<List dataArray={dataArray}renderRow={(item) =>
<Accordion renderHeader={this._renderHeader}dataArray={[item]}renderContent={this._renderContent}/>
? ? ? ? ? ? }/>
? ? ? ? );
? ? }
}
5.總結(jié)
? ? 這是目前個(gè)人覺得完美的實(shí)現(xiàn)，采納的攻城獅門，麻煩點(diǎn)贊。謝謝
