悬浮分组列表实现代码如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
SectionList,
TouchableOpacity,
} from 'react-native';
// 初始化总数据
var AllArr=[
{name:'河北省',citys:[{name:'石家庄'},{name:'沧州'},{name:'邢台'},{name:'邯郸'},{name:'衡水'}]},
{name:'山西省',citys:[{name:'太原'},{name:'大同'},{name:'阳泉'},{name:'临汾'},{name:'晋城'}]},
{name:'辽宁省',citys:[{name:'沈阳市'},{name:'大连市'},{name:'鞍山市'},{name:'抚顺市'},{name:'本溪市'}]},
{name:'吉林省',citys:[{name:'长春市'},{name:'吉林市'},{name:'四平市'},{name:'辽源市'},{name:'通化市'}]},
{name:'黑龙江省',citys:[{name:'哈尔滨'},{name:'齐齐哈尔'},{name:'双鸭山'}]},
{name:'江苏省',citys:[{name:'南京'},{name:'苏州'},{name:'无锡'},{name:'常州'}]},
{name:'浙江省',citys:[{name:'杭州市'},{name:'宁波'},{name:'温州'},{name:'嘉兴'},{name:'湖州'}]},
];
export default class MySectionList extends Component {
constructor(props) {
super(props);
this.state = {
//改变数据的数组
Arr:[
{name:'河北省',citys:[{name:'石家庄'},{name:'沧州'},{name:'邢台'},{name:'邯郸'},{name:'衡水'}]},
{name:'山西省',citys:[{name:'太原'},{name:'大同'},{name:'阳泉'},{name:'临汾'},{name:'晋城'}]},
{name:'辽宁省',citys:[{name:'沈阳市'},{name:'大连市'},{name:'鞍山市'},{name:'抚顺市'},{name:'本溪市'}]},
{name:'吉林省',citys:[{name:'长春市'},{name:'吉林市'},{name:'四平市'},{name:'辽源市'},{name:'通化市'}]},
{name:'黑龙江省',citys:[{name:'哈尔滨'},{name:'齐齐哈尔'},{name:'双鸭山'}]},
{name:'江苏省',citys:[{name:'南京'},{name:'苏州'},{name:'无锡'},{name:'常州'}]},
{name:'浙江省',citys:[{name:'杭州市'},{name:'宁波'},{name:'温州'},{name:'嘉兴'},{name:'湖州'}]},
]
};
//for循环添加字段删除字段添加标示和key
for (var i = 0; i < this.state.Arr.length; i++) {
this.state.Arr[i]['data'] = [];
this.state.Arr[i]['key'] = i;
this.state.Arr[i]['isShow'] = 'off';
delete this.state.Arr[i]['citys'];
}
}
//分组创建的cell
Cell(data){
return(
{data.item.name}
);
}
// 展开改变数据源，增加数据，合上删除数组里的数据，根据isShow状态判断
show(data){
if (data.isShow==='off') {
this.state.Arr[data.key]['data'] = AllArr[data.key].citys;
this.state.Arr[data.key]['isShow'] = 'on';
this.setState({
Arr:this.state.Arr,
});
}else{
this.state.Arr[data.key]['data'] = [];
this.state.Arr[data.key]['isShow'] = 'off';
this.setState({
Arr:this.state.Arr,
});
}
}
//列表分组的header
Header({section}){
return(
{this.show(section)}}>
{section.name}
);
}
//去除警告
extraUniqueKey(item,index){
return index+item;
}
render() {
console.log('========'+JSON.stringify(this.state.Arr));
return (
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('MySectionList', () => MySectionList);
实现效果如下：
QQ20170816-115757-HD.gif