ReactNative 之FlatList使用及踩坑封装总结

网友投稿 1270 2023-03-10


ReactNative 之FlatList使用及踩坑封装总结

在RN中FlatList是一个高性能的列表组件,它是ListView组件的升级版,性能方面有了很大的提升,当然也就建议大家在实现列表功能时使用FlatList,尽量不要使用ListView,更不要使用ScrollView。既然说到FlatList,那就先温习一下它支持的功能。

完全跨平台。

支持水平布局模式。

行组件显示或隐藏时可配置回调事件。

支持单独的头部组件。

支持单独的尾部组件。

支持自定义行间分隔线。

支持下拉刷新。

支持上拉加载。

支持跳转到指定行(ScrollToIndex)。

今天的这篇文章不具体介绍如何使用,如果想看如何使用,可以参考我github https://github.com/xiehui999/helloReactNative的一些示例。今天的这篇文章主要介绍我使用过程中感觉比较大的坑,并对FlatList进行的二次封装。

接下来,我们先来一个简单的例子。我们文章也有这个例子开始探讨。

data={this.state.dataList} extraData={this.state}

refreshing={this.state.isRefreshing}

onRefresh={() => this._onRefresh()}

keyExtractor={(item, index) => item.id}

ItemSeparatorComponent={() =>

height: 1,

backgroundColor: '#D6D6D6'

}}/>}

renderItem={this._renderItem}

ListEmptyComponent={this.emptyComponent}/>

//定义空布局

emptyComponent = () => {

return

height: '100%',

alignItems: 'center',

justifyContent: 'center',

}}>

fontSize: 16

}}>暂无数据下拉刷新

}

在上面的代码,我们主要看一下ListEmptyComponent,它表示没有数据的时候填充的布局,一般情况我们会在中间显示显示一个提示信息,为了介绍方便就简单展示一个暂无数据下拉刷新。上面代码看起来是暂无数据居中显示,但是运行后,你傻眼了,暂无数据在最上面中间显示,此时高度100%并没有产生效果。当然你尝试使用flex:1,将View的高视图填充剩余全屏,不过依然没有效果。

那为什么设置了没有效果呢,既然好奇,我们就来去源码看一下究竟。源码路径在react-native-->Libraries-->Lists。列表的组件都该目录下。我们先去FlatList文件搜索关键词ListEmptyComponent,发现该组件并没有被使用,那就继续去render

render() {

if (this.props.legacyImplementation) {

return (

{...this.props}

items={this.props.data}

ref={this._captureRef}

/>

);

} else {

return (

{...this.props}

renderItem={this._renderItem}

getItem={this._getItem}

getItemCount={this._getItemCount}

keyExtractor={this._keyExtractor}

ref={this._captureRef}

onViewableItemsChanged={

this.props.onViewableItemsChanged && this._onViewableItemsChanged

}

/>

);

}

}

MetroListView(内部实行是ScrollView)是旧的ListView实现方式,VirtualizedList是新的性能比较好的实现。我们去该文件

//省略部分代码

const itemCount = this.props.getItemCount(data);

if (itemCount > 0) {

....省略部分代码

} else if (ListEmptyComponent) {

const element = React.isValidElement(ListEmptyComponent)

? ListEmptyComponent // $FlowFixMe

: ;

cells.push(

/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This

* comment suppresses an error when upgrading Flow's support for React.

* To see the error delete this comment and run Flow. */

key="$empty"

onLayout={this._onLayoutEmpty}

style={inversionStyle}>

{element}

,

);

}

再此处看到我们定义的ListEmptyComponent外面包了一层view,该view加了样式inversionStyle。

const inversionStyle = this.props.inverted

? this.props.horizontal

? styles.horizontallyInverted

: styles.verticallyInverted

: null;

样式:

verticallyInverted: {

transform: [{scaleY: -1}],

},

horizontallyInverted: {

transform: [{scaleX: -1}],

},

上面的样式就是添加了一个动画,并没有设置高度,所以我们在ListEmptyComponent使用height:'100%'或者flex:1都没有效果,都没有撑起高度。

为了实现我们想要的效果,我们需要将height设置为具体的值。那么该值设置多大呢?你如果给FlatList设置一个样式,背景属性设置一个颜色,发现FlatList是默认有占满剩余屏的高度的(flex:1)。那么我们可以将ListEmptyComponent中view的高度设置为FlatList的高度,要获取FlatList的高度,我们可以通过onLayout获取。

代码调整:

//创建变量

fHeight = 0;

data={this.state.dataList} extraData={this.state}

refreshing={this.state.isRefreshing}

onRefresh={() => this._onRefresh()}

keyExtractor={(item, index) => item.id}

ItemSeparatorComponent={() =>

height: 1,

backgroundColor: '#D6D6D6'

}}/>}

renderItem={this._renderItem}

onLayout={e => this.fHeight = e.nativeEvent.layout.height}

ListEmptyComponent={this.emptyComponent}/>

//定义空布局

emptyComponent = () => {

return

height: this.fHeight,

alignItems: 'center',

justifyContent: 'center',

}}>

fontSize: 16

}}>暂无数据

}

通过上面的调整发现在android上运行时达到我们想要的效果了,但是在iOS上,不可控,偶尔居中显示,偶尔又显示到最上面。原因就是在iOS上onLayout调用的时机与Android略微差别(iOS会出现emptyComponent渲染时onLayout还没有回调,此时fHeight还没有值)。

所以为了将变化后的值作用到emptyComponent,我们将fHeight设置到state中

state={

fHeight:0

}

onLayout={e => this.setState({fHeight: e.nativeEvent.layout.height})}

这样设置后应该完美了吧,可是....在android上依然能完美实现我们要的效果,在iOS上出现了来回闪屏的的问题。打印log发现值一直是0和测量后的值来回转换。在此处我们仅仅需要是测量的值,所以我们修改onLayout

onLayout={e => {

let height = e.nativeEvent.layout.height;

if (this.state.fHeight < height) {

this.setState({fHeight: height})

}

}}

经过处理后,在ios上终于完美的实现我们要的效果了。

除了上面的坑之外,个人感觉还有一个坑就是onEndReached,如果我们实现下拉加载功能,都会用到这个属性,提到它我们当然就要提到onEndReachedThreshold,在FlatList中onEndReachedThreshold是一个number类型,是一个他表示具体底部还有多远时触发onEndReached,需要注意的是FlatList和ListView中的onEndReachedThreshold表示的含义是不同的,在ListView中onEndReachedThreshold表示具体底部还有多少像素时触发onEndReached,默认值是1000。而FlatList中表示的是一个倍数(也称比值,不是像素),默认值是2。

那么按照常规我们看下面实现

data={this.state.dataList}

extraData={this.state}

refreshing={this.state.isRefreshing}

onRefresh={() => this._onRefresh()}

ItemSeparatorComponent={() =>

height: 1,

backgroundColor: '#D6D6D6'

}}/>}

renderItem={this._renderItem}

ListEmptyComponent={this.emptyComponent}

onEndReached={() => this._onEndReached()}

onEndReachedThreshold={0.1}/>

然后我们在componentDidMount中加入下面代码

componentDidMount() {

this._onRefresh()

}

也就是进入开始加载第一页数据,下拉的执行onEndReached加载更多数据,并更新数据源dataList。看起来是完美的,不过.....运行后你会发现onEndReached一直循环调用(或多次执行),有可能直到所有数据加载完成,原因可能大家也能猜到了,因为_onRefresh加载数据需要时间,在数据请求到之前render方法执行,由于此时没有数据,onEndReached方法执行一次,那么此时相当于加载了两次数据。

至于onEndReached执行多少次就需要onEndReachedThreshold的值来定了,所以我们一定要慎重设置onEndReachedThreshold,如果你要是理解成了设置像素,设置成了一个比较大的数,比如100,那完蛋了....个人感觉设置0.1是比较好的值。

通过上面的分析,个人感觉有必要对FlatList进行一次二次封装了,根据自己的需求我进行了一次二次封装

import React, {

Component,

} from 'react'

import {

FlatList,

View,

StyleSheet,

ActivityIndicator,

Text

} from 'react-native'

import PropTypes from 'prop-types';

export const FlatListState = {

IDLE: 0,

LoadMore: 1,

Refreshing: 2

};

export default class Com extends Component {

static propTypes = {

refreshing: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),

};

state = {

listHeight: 0,

}

render() {

var {ListEmptyComponent,ItemSeparatorComponent} = this.props;

var refreshing = false;

var emptyContent = null;

var separatorComponent = null

if (ListEmptyComponent) {

emptyContent = React.isValidElement(ListEmptyComponent) ? ListEmptyComponent :

} else {

emptyContent = 暂无数据下拉刷新;

}

if (ItemSeparatorComponent) {

separatorComponent = React.isValidElement(ItemSeparatorComponent) ? ItemSeparatorComponent :

} else {

separatorComponent = ;

}

if (typeof this.props.refreshing === "number") {

if (this.props.refreshing === FlatListState.Refreshing) {

refreshing = true

}

} else if (typeof this.props.refreshing === "boolean") {

refreshing = this.props.refreshing

} else if (typeof this.props.refreshing !== "undefined") {

refreshing = false

}

return

{...this.props}

onLayout={(e) => {

let height = e.nativeEvent.layout.height;

if (this.state.listHeight < height) {

this.setState({listHeight: height})

}

}

}

ListFooterComponent={this.renderFooter}

onRefresh={this.onRefresh}

onEndReached={this.onEndReached}

refreshing={refreshing}

onEndReachedThreshold={this.props.onEndReachedThreshold || 0.1}

ItemSeparatorComponent={()=>separatorComponent}

keyExtractor={(item, index) => index}

ListEmptyComponent={() =>

style={{

height: this.state.listHeight,

width: '100%',

alignItems: 'center',

justifyContent: 'center'

}}>{emptyContent}}

/>

}

onRefresh = () => {

console.log("FlatList:onRefresh");

if ((typeof this.props.refreshing === "boolean" && !this.props.refreshing) ||

typeof this.props.refreshing === "number" && this.props.refreshing !== FlatListState.LoadMore &&

this.props.refreshing !== FlatListState.Refreshing

) {

this.props.onRefresh && this.props.onRefresh()

}

};

onEndReached = () => {

console.log("FlatList:onEndReached");

if (typeof this.props.refreshing === "boolean" || this.props.data.length == 0) {

return

}

if (!this.props.pageSize) {

console.warn("pageSize must be set");

return

}

if (this.props.data.length % this.props.pageSize !== 0) {

return

}

if (this.proZZfgbAPps.refreshing === FlatListState.IDLE) {

this.props.onEndReached && this.props.onEndReached()

}

};

renderFooter = () => {

let footer = null;

if (typeof this.props.refreshing !== "boolean" && this.props.refreshing === FlatListState.LoadMore) {

footer = (

数据加载中…

)

}

return footer;

}

}

const styles = StyleSheet.create({

footerStyle: {

flex: 1,

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

padding: 10,

height: 44,

},

footerText: {

fontSize: 14,

color: '#555555',

marginLeft: 7

},

emptyText: {

fontSize: 17,

color: '#666666'

}

})

propTypes中我们使用了oneOfType对refreshing类型进行限定,如果ListEmptyComponent有定义,就是使用自定义分View,同理ItemSeparatorComponent也可以自定义。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:接口压力测试用例编写(接口压力测试面试题)
下一篇:spring接口开发(spring开放api实现)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~