当前位置:Gxlcms > JavaScript > ReactNative 之FlatList使用及踩坑封装总结

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

时间:2021-07-01 10:21:17 帮助过:9人阅读

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

  1. 完全跨平台。
  2. 支持水平布局模式。
  3. 行组件显示或隐藏时可配置回调事件。
  4. 支持单独的头部组件。
  5. 支持单独的尾部组件。
  6. 支持自定义行间分隔线。
  7. 支持下拉刷新。
  8. 支持上拉加载。
  9. 支持跳转到指定行(ScrollToIndex)。

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

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

  1. <FlatList
  2. data={this.state.dataList} extraData={this.state}
  3. refreshing={this.state.isRefreshing}
  4. onRefresh={() => this._onRefresh()}
  5. keyExtractor={(item, index) => item.id}
  6. ItemSeparatorComponent={() => <View style={{
  7. height: 1,
  8. backgroundColor: '#D6D6D6'
  9. }}/>}
  10. renderItem={this._renderItem}
  11. ListEmptyComponent={this.emptyComponent}/>
  12. //定义空布局
  13. emptyComponent = () => {
  14. return <View style={{
  15. height: '100%',
  16. alignItems: 'center',
  17. justifyContent: 'center',
  18. }}>
  19. <Text style={{
  20. fontSize: 16
  21. }}>暂无数据下拉刷新</Text>
  22. </View>
  23. }

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

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

  1. render() {
  2. if (this.props.legacyImplementation) {
  3. return (
  4. <MetroListView
  5. {...this.props}
  6. items={this.props.data}
  7. ref={this._captureRef}
  8. />
  9. );
  10. } else {
  11. return (
  12. <VirtualizedList
  13. {...this.props}
  14. renderItem={this._renderItem}
  15. getItem={this._getItem}
  16. getItemCount={this._getItemCount}
  17. keyExtractor={this._keyExtractor}
  18. ref={this._captureRef}
  19. onViewableItemsChanged={
  20. this.props.onViewableItemsChanged && this._onViewableItemsChanged
  21. }
  22. />
  23. );
  24. }
  25. }

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

  1. //省略部分代码
  2. const itemCount = this.props.getItemCount(data);
  3. if (itemCount > 0) {
  4. ....省略部分代码
  5. } else if (ListEmptyComponent) {
  6. const element = React.isValidElement(ListEmptyComponent)
  7. ? ListEmptyComponent // $FlowFixMe
  8. : <ListEmptyComponent />;
  9. cells.push(
  10. /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
  11. * comment suppresses an error when upgrading Flow's support for React.
  12. * To see the error delete this comment and run Flow. */
  13. <View
  14. key="$empty"
  15. onLayout={this._onLayoutEmpty}
  16. style={inversionStyle}>
  17. {element}
  18. </View>,
  19. );
  20. }

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

  1. const inversionStyle = this.props.inverted
  2. ? this.props.horizontal
  3. ? styles.horizontallyInverted
  4. : styles.verticallyInverted
  5. : null;
  6. 样式:
  7. verticallyInverted: {
  8. transform: [{scaleY: -1}],
  9. },
  10. horizontallyInverted: {
  11. transform: [{scaleX: -1}],
  12. },

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

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

代码调整:

  1. //创建变量
  2. fHeight = 0;
  3. <FlatList
  4. data={this.state.dataList} extraData={this.state}
  5. refreshing={this.state.isRefreshing}
  6. onRefresh={() => this._onRefresh()}
  7. keyExtractor={(item, index) => item.id}
  8. ItemSeparatorComponent={() => <View style={{
  9. height: 1,
  10. backgroundColor: '#D6D6D6'
  11. }}/>}
  12. renderItem={this._renderItem}
  13. onLayout={e => this.fHeight = e.nativeEvent.layout.height}
  14. ListEmptyComponent={this.emptyComponent}/>
  15. //定义空布局
  16. emptyComponent = () => {
  17. return <View style={{
  18. height: this.fHeight,
  19. alignItems: 'center',
  20. justifyContent: 'center',
  21. }}>
  22. <Text style={{
  23. fontSize: 16
  24. }}>暂无数据</Text>
  25. </View>
  26. }

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

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

  1. state={
  2. fHeight:0
  3. }
  4. onLayout={e => this.setState({fHeight: e.nativeEvent.layout.height})}

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

  1. onLayout={e => {
  2. let height = e.nativeEvent.layout.height;
  3. if (this.state.fHeight < height) {
  4. this.setState({fHeight: height})
  5. }
  6. }}

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

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

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

  1. <FlatList
  2. data={this.state.dataList}
  3. extraData={this.state}
  4. refreshing={this.state.isRefreshing}
  5. onRefresh={() => this._onRefresh()}
  6. ItemSeparatorComponent={() => <View style={{
  7. height: 1,
  8. backgroundColor: '#D6D6D6'
  9. }}/>}
  10. renderItem={this._renderItem}
  11. ListEmptyComponent={this.emptyComponent}
  12. onEndReached={() => this._onEndReached()}
  13. onEndReachedThreshold={0.1}/>

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

  1. componentDidMount() {
  2. this._onRefresh()
  3. }

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

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

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

  1. import React, {
  2. Component,
  3. } from 'react'
  4. import {
  5. FlatList,
  6. View,
  7. StyleSheet,
  8. ActivityIndicator,
  9. Text
  10. } from 'react-native'
  11. import PropTypes from 'prop-types';
  12. export const FlatListState = {
  13. IDLE: 0,
  14. LoadMore: 1,
  15. Refreshing: 2
  16. };
  17. export default class Com extends Component {
  18. static propTypes = {
  19. refreshing: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
  20. };
  21. state = {
  22. listHeight: 0,
  23. }
  24. render() {
  25. var {ListEmptyComponent,ItemSeparatorComponent} = this.props;
  26. var refreshing = false;
  27. var emptyContent = null;
  28. var separatorComponent = null
  29. if (ListEmptyComponent) {
  30. emptyContent = React.isValidElement(ListEmptyComponent) ? ListEmptyComponent : <ListEmptyComponent/>
  31. } else {
  32. emptyContent = <Text style={styles.emptyText}>暂无数据下拉刷新</Text>;
  33. }
  34. if (ItemSeparatorComponent) {
  35. separatorComponent = React.isValidElement(ItemSeparatorComponent) ? ItemSeparatorComponent :
  36. <ItemSeparatorComponent/>
  37. } else {
  38. separatorComponent = <View style={{height: 1, backgroundColor: '#D6D6D6'}}/>;
  39. }
  40. if (typeof this.props.refreshing === "number") {
  41. if (this.props.refreshing === FlatListState.Refreshing) {
  42. refreshing = true
  43. }
  44. } else if (typeof this.props.refreshing === "boolean") {
  45. refreshing = this.props.refreshing
  46. } else if (typeof this.props.refreshing !== "undefined") {
  47. refreshing = false
  48. }
  49. return <FlatList
  50. {...this.props}
  51. onLayout={(e) => {
  52. let height = e.nativeEvent.layout.height;
  53. if (this.state.listHeight < height) {
  54. this.setState({listHeight: height})
  55. }
  56. }
  57. }
  58. ListFooterComponent={this.renderFooter}
  59. onRefresh={this.onRefresh}
  60. onEndReached={this.onEndReached}
  61. refreshing={refreshing}
  62. onEndReachedThreshold={this.props.onEndReachedThreshold || 0.1}
  63. ItemSeparatorComponent={()=>separatorComponent}
  64. keyExtractor={(item, index) => index}
  65. ListEmptyComponent={() => <View
  66. style={{
  67. height: this.state.listHeight,
  68. width: '100%',
  69. alignItems: 'center',
  70. justifyContent: 'center'
  71. }}>{emptyContent}</View>}
  72. />
  73. }
  74. onRefresh = () => {
  75. console.log("FlatList:onRefresh");
  76. if ((typeof this.props.refreshing === "boolean" && !this.props.refreshing) ||
  77. typeof this.props.refreshing === "number" && this.props.refreshing !== FlatListState.LoadMore &&
  78. this.props.refreshing !== FlatListState.Refreshing
  79. ) {
  80. this.props.onRefresh && this.props.onRefresh()
  81. }
  82. };
  83. onEndReached = () => {
  84. console.log("FlatList:onEndReached");
  85. if (typeof this.props.refreshing === "boolean" || this.props.data.length == 0) {
  86. return
  87. }
  88. if (!this.props.pageSize) {
  89. console.warn("pageSize must be set");
  90. return
  91. }
  92. if (this.props.data.length % this.props.pageSize !== 0) {
  93. return
  94. }
  95. if (this.props.refreshing === FlatListState.IDLE) {
  96. this.props.onEndReached && this.props.onEndReached()
  97. }
  98. };
  99. renderFooter = () => {
  100. let footer = null;
  101. if (typeof this.props.refreshing !== "boolean" && this.props.refreshing === FlatListState.LoadMore) {
  102. footer = (
  103. <View style={styles.footerStyle}>
  104. <ActivityIndicator size="small" color="#888888"/>
  105. <Text style={styles.footerText}>数据加载中…</Text>
  106. </View>
  107. )
  108. }
  109. return footer;
  110. }
  111. }
  112. const styles = StyleSheet.create({
  113. footerStyle: {
  114. flex: 1,
  115. flexDirection: 'row',
  116. justifyContent: 'center',
  117. alignItems: 'center',
  118. padding: 10,
  119. height: 44,
  120. },
  121. footerText: {
  122. fontSize: 14,
  123. color: '#555555',
  124. marginLeft: 7
  125. },
  126. emptyText: {
  127. fontSize: 17,
  128. color: '#666666'
  129. }
  130. })

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

在下拉加载数据时定义了一个ListFooterComponent,用于提示用户正在加载数据,refreshing属性如果是boolean的话,表示没有下拉加载功能,如果是number类型,pageSize必须传,数据源长度与pageSize取余是否等于0,判断是否有更多数据(最后一次请求的数据等于pageSize时才有更多数据,小于就不用回调onEndReached)。当然上面的代码也很简单,相信很容易看懂,其它就不多介绍了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行