React-Native中列表SectionList学习(示例代码)

baxiu 2020-12-31

栏目: 类库 ·

来源: baxiu

作者:baxiu

简介  这篇文章主要介绍了React-Native中列表SectionList学习(示例代码)以及相关的经验技巧,文章约6634字,浏览量510,点赞数6,值得推荐!

前言:

  上一章我们学习了FlatList组件,本章我们来学习SectionList组件,当界面需要分区的显示时候我们采用这个组件.

常用API:

SectionList是高性能的分组列表组件.实质是基于<VirtualizedList>组件的封装<SectionList

    style={{marginTop:20,width:width}}
renderSectionHeader={() => <Text 我是区头/>} //区头
renderItem={() => <Text>我是cell</Text>} //cell
sections={this.state.sections} //数据源
ItemSeparatorComponent={() => <View style={{backgroundColor:‘red‘,height:1}}></View>} //分割线
stickySectionHeadersEnabled={false} //设置区头是否悬浮在屏幕顶部,默认是true
ListEmptyComponent = {() => <Text>没有数据哦</Text>} // 数据为空时调用
initialNumToRender = {2} //指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容
onEndReachedThreshold = {0.001} //0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
onEndReached = {() => {alert(123)}} //当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
setVerticalScrollBarEnabled = {false}
setFastScrollEnabled = {false}
refreshing={this.state.refreshing} // 是否刷新 ,自带刷新控件
onRefresh={()=>{
this.refresh();
}} // 刷新方法,写了此方法,下拉才会出现 刷新控件,使用此方法必须写 refreshing
ListHeaderComponent={() => <View style={{ backgroundColor: ‘#25B960‘, alignItems: ‘center‘, height: 30 }}><Text style={{ fontSize: 18, color: ‘#ffffff‘,lineHeight:30 }}>通讯录</Text></View>}
ListFooterComponent={() => <View style={{ backgroundColor: ‘#25B960‘, alignItems: ‘center‘, height: 30 }}><Text style={{ fontSize: 18, color: ‘#ffffff‘ ,lineHeight:30}}>通讯录尾部</Text></View>}
/>

实战:
我们来进行一个简单的实例,实现一个带刷新的通讯录效果,先来看一下最终效果
技术分享图片

思路:
主要思路就是1,引入SectionList文件->创建构造器申明数据源->页面布局SectionList设置常用属性并传递数据源->在cell和区头中从数据源取值并赋值.

源代码:
import React, {Component} from ‘react‘;
import { StyleSheet, Text, View,SectionList,Dimensions} from ‘react-native‘; //引入js文件

var {width} = Dimensions.get(‘window‘);

type Props = {};
export default class App extends Component<Props> {
constructor(props) { //构造器
super(props);
this.state = {
refreshing: false, //是否刷新,通过更改此属性来控制是否刷新
sections:[ //数据源
{ key: "A", data: [{ title: "啊是啊" }, { title: "阿玛尼" }, { title: "爱你" }] },
{ key: "B", data: [{ title: "婊子" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
{ key: "C", data: [{ title: "陈鑫" }, { title: "吃点饭是" }] },
{ key: "D", data: [{ title: "大哥" }, { title: "地方" }, { title: "大大" },{ title: "大鸡鸡" }, { title: "大屌" }, { title: "大屌me干嘛" }] },
]
};
}
/*刷新*/
refresh(){
this.setState({
refreshing: true,
});
setTimeout(()=>{ //通过定时器来模拟刷新
this.setState({
refreshing: false,
});
},2000);
}

render() {
return (
<View style={{flex: 1,}}>
<SectionList
style={{marginTop:20,width:width}}
renderSectionHeader={this._sectionComp} //区头
renderItem={this._renderItem} //cell
sections={this.state.sections} //数据源
ItemSeparatorComponent={() => <View style={{backgroundColor:‘red‘,height:1}}></View>} //分割线
stickySectionHeadersEnabled={false} //设置区头是否悬浮在屏幕顶部,默认是true
ListEmptyComponent = {() => <Text>没有数据哦</Text>} // 数据为空时调用
initialNumToRender = {2} //指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容
onEndReachedThreshold = {0.001} //0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
onEndReached = {() => {alert(123)}} //当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
setVerticalScrollBarEnabled = {false}
setFastScrollEnabled = {false}
refreshing={this.state.refreshing} // 是否刷新 ,自带刷新控件
onRefresh={()=>{
this.refresh();
}} // 刷新方法,写了此方法,下拉才会出现 刷新控件,使用此方法必须写 refreshing
ListHeaderComponent={() => <View style={{ backgroundColor: ‘#25B960‘, alignItems: ‘center‘, height: 30 }}><Text style={{ fontSize: 18, color: ‘#ffffff‘,lineHeight:30 }}>通讯录</Text></View>}
ListFooterComponent={() => <View style={{ backgroundColor: ‘#25B960‘, alignItems: ‘center‘, height: 30 }}><Text style={{ fontSize: 18, color: ‘#ffffff‘ ,lineHeight:30}}>通讯录尾部</Text></View>}
/>
</View>
);
}
_renderItem = (info) => {
var txt = ‘ ‘ + info.item.title; //取到数据源中的title
return <Text
style={{ height: 60,lineHeight:60, textAlign: ‘center‘, backgroundColor: "#ffffff", color: ‘#5C5C5C‘, fontSize: 15 }}>{txt}</Text>
}

_sectionComp = (info) => {
var txt = info.section.key;
return <Text
style={{ height: 50, textAlign: ‘center‘, lineHeight:50, backgroundColor: ‘#9CEBBC‘, color: ‘white‘, fontSize: 30 }}>{txt}</Text>
}
}

到这里我们就实现了.如果对你有帮助,请分享给身边的朋友.让我们一起进步!

技术分享图片

 





































































































以上就是本文的全部内容,希望对大家的学习有所帮助,本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 原文地址:https://www.cnblogs.com/baxiu/p/9517221.html

相关文章

004-React-Native--多图选择上传(示例代码)

react-native导航器 react navigation 介绍(示例代码)

react-native app在启动屏幕上崩溃(示例代码)

ListView-电影列表(示例代码)

React-Native 开发(二) 在react-native 中 运用 redux(示例代码)

从父组件中生成生成列表的本机/ Redux状态

在react-native中,我如何在ios和android的图像上添加水印

fetch 请求列表ListView(示例代码)