废话不多说先来看看效果：
1.前言
最近公司有一个新需求。有子项的能展开与收缩，没有子项的之前显示主项。显示主项FlatList这个总所周知。但是在这里面展开与收缩，代码不难写，但是性能方面呢，要不就是卡顿要么就是隐隐约约的延迟效果。有好多人也尝试用SectionList，本人也尝试过，但是还是出现卡顿与延迟。在github，以及开源中国上，google上查了一遍，跑了很多人写的demo，都存在这个问题。废话不多说开始看代码
2.解决问题的关键
关键在于展开与收缩的实现，平常的写代码，或者加动画，也不能完全掩盖性能的问题。通过在github上查阅react-native-ui的开源库，找到了native-base这个库，地址：https://github.com/GeekyAnts/NativeBase。通过查阅组建库，发现了一个叫Accordion这个控件，发现展开与收缩，效果极佳，性能优越。
紧接着，通过FlatList中的renderRow方法让每一项都是Accordion，是不是效果就能实现。
通过尝试，目前已经得以解决，至于这个Accordion的header与content，则可以通过Accordion的renderHeader和renderContent进行自定义。
3.需求解决
需求一：列表分组展开收缩卡顿问题解决
需求二：有子item的展示，没有的显示header，代码逻辑自己书写，这个不难实现吧。
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.总结
这是目前个人觉得完美的实现，采纳的攻城狮门，麻烦点赞。谢谢
