ReactNative 之FlatList使用及踩坑封裝總結(jié)

更新時(shí)間：2017年11月29日 09:49:17 作者：Code4Android

本篇文章主要介紹了ReactNative 之FlatList使用及踩坑封裝總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在RN中FlatList是一個(gè)高性能的列表組件，它是ListView組件的升級(jí)版，性能方面有了很大的提升，當(dāng)然也就建議大家在實(shí)現(xiàn)列表功能時(shí)使用FlatList,盡量不要使用ListView，更不要使用ScrollView。既然說到FlatList，那就先溫習(xí)一下它支持的功能。

完全跨平臺(tái)。
支持水平布局模式。
行組件顯示或隱藏時(shí)可配置回調(diào)事件。
支持單獨(dú)的頭部組件。
支持單獨(dú)的尾部組件。
支持自定義行間分隔線。
支持下拉刷新。
支持上拉加載。
支持跳轉(zhuǎn)到指定行（ScrollToIndex）。

今天的這篇文章不具體介紹如何使用，如果想看如何使用，可以參考我GitHub https://github.com/xiehui999/helloReactNative的一些示例。今天的這篇文章主要介紹我使用過程中感覺比較大的坑，并對(duì)FlatList進(jìn)行的二次封裝。

接下來，我們先來一個(gè)簡(jiǎn)單的例子。我們文章也有這個(gè)例子開始探討。

    <FlatList
      data={this.state.dataList} extraData={this.state}
      refreshing={this.state.isRefreshing}
      onRefresh={() => this._onRefresh()}
      keyExtractor={(item, index) => item.id}
      ItemSeparatorComponent={() => <View style={{
        height: 1,
        backgroundColor: '#D6D6D6'
      }}/>}
      renderItem={this._renderItem}
      ListEmptyComponent={this.emptyComponent}/>
      
      
  //定義空布局
    emptyComponent = () => {
    return <View style={{
      height: '100%',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      <Text style={{
        fontSize: 16
      }}>暫無(wú)數(shù)據(jù)下拉刷新</Text>
    </View>
  }

在上面的代碼，我們主要看一下ListEmptyComponent，它表示沒有數(shù)據(jù)的時(shí)候填充的布局，一般情況我們會(huì)在中間顯示顯示一個(gè)提示信息，為了介紹方便就簡(jiǎn)單展示一個(gè)暫無(wú)數(shù)據(jù)下拉刷新。上面代碼看起來是暫無(wú)數(shù)據(jù)居中顯示，但是運(yùn)行后，你傻眼了，暫無(wú)數(shù)據(jù)在最上面中間顯示，此時(shí)高度100%并沒有產(chǎn)生效果。當(dāng)然你嘗試使用flex:1，將View的高視圖填充剩余全屏，不過依然沒有效果。

那為什么設(shè)置了沒有效果呢，既然好奇，我們就來去源碼看一下究竟。源碼路徑在react-native-->Libraries-->Lists。列表的組件都該目錄下。我們先去FlatList文件搜索關(guān)鍵詞ListEmptyComponent，發(fā)現(xiàn)該組件并沒有被使用，那就繼續(xù)去render

 render() {
  if (this.props.legacyImplementation) {
   return (
    <MetroListView
     {...this.props}
     items={this.props.data}
     ref={this._captureRef}
    />
   );
  } else {
   return (
    <VirtualizedList
     {...this.props}
     renderItem={this._renderItem}
     getItem={this._getItem}
     getItemCount={this._getItemCount}
     keyExtractor={this._keyExtractor}
     ref={this._captureRef}
     onViewableItemsChanged={
      this.props.onViewableItemsChanged && this._onViewableItemsChanged
     }
    />
   );
  }
 }

MetroListView（內(nèi)部實(shí)行是ScrollView）是舊的ListView實(shí)現(xiàn)方式，VirtualizedList是新的性能比較好的實(shí)現(xiàn)。我們?nèi)ピ撐募?/p>

  //省略部分代碼
  const itemCount = this.props.getItemCount(data);
  if (itemCount > 0) {
    ....省略部分代碼
  } else if (ListEmptyComponent) {
   const element = React.isValidElement(ListEmptyComponent)
    ? ListEmptyComponent // $FlowFixMe
    : <ListEmptyComponent />;
   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. */
    <View
     key="$empty"
     onLayout={this._onLayoutEmpty}
     style={inversionStyle}>
     {element}
    </View>,
   );
  }

再此處看到我們定義的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}],
 },

上面的樣式就是添加了一個(gè)動(dòng)畫，并沒有設(shè)置高度，所以我們?cè)贚istEmptyComponent使用height:'100%'或者flex:1都沒有效果，都沒有撐起高度。

為了實(shí)現(xiàn)我們想要的效果，我們需要將height設(shè)置為具體的值。那么該值設(shè)置多大呢？你如果給FlatList設(shè)置一個(gè)樣式，背景屬性設(shè)置一個(gè)顏色，發(fā)現(xiàn)FlatList是默認(rèn)有占滿剩余屏的高度的（flex：1）。那么我們可以將ListEmptyComponent中view的高度設(shè)置為FlatList的高度，要獲取FlatList的高度，我們可以通過onLayout獲取。

代碼調(diào)整：

//創(chuàng)建變量
fHeight = 0;

    <FlatList
      data={this.state.dataList} extraData={this.state}
      refreshing={this.state.isRefreshing}
      onRefresh={() => this._onRefresh()}
      keyExtractor={(item, index) => item.id}
      ItemSeparatorComponent={() => <View style={{
        height: 1,
        backgroundColor: '#D6D6D6'
      }}/>}
      renderItem={this._renderItem}
      onLayout={e => this.fHeight = e.nativeEvent.layout.height}
      ListEmptyComponent={this.emptyComponent}/>
      
      
  //定義空布局
    emptyComponent = () => {
    return <View style={{
      height: this.fHeight,
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      <Text style={{
        fontSize: 16
      }}>暫無(wú)數(shù)據(jù)</Text>
    </View>
  }

通過上面的調(diào)整發(fā)現(xiàn)在Android上運(yùn)行時(shí)達(dá)到我們想要的效果了，但是在iOS上，不可控，偶爾居中顯示，偶爾又顯示到最上面。原因就是在iOS上onLayout調(diào)用的時(shí)機(jī)與Android略微差別(iOS會(huì)出現(xiàn)emptyComponent渲染時(shí)onLayout還沒有回調(diào)，此時(shí)fHeight還沒有值)。

所以為了將變化后的值作用到emptyComponent，我們將fHeight設(shè)置到state中

state={
  fHeight:0
}

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

這樣設(shè)置后應(yīng)該完美了吧，可是....在android上依然能完美實(shí)現(xiàn)我們要的效果，在iOS上出現(xiàn)了來回閃屏的的問題。打印log發(fā)現(xiàn)值一直是0和測(cè)量后的值來回轉(zhuǎn)換。在此處我們僅僅需要是測(cè)量的值，所以我們修改onLayout

           onLayout={e => {
             let height = e.nativeEvent.layout.height;
             if (this.state.fHeight < height) {
               this.setState({fHeight: height})
             }
           }}

經(jīng)過處理后，在ios上終于完美的實(shí)現(xiàn)我們要的效果了。

除了上面的坑之外，個(gè)人感覺還有一個(gè)坑就是onEndReached，如果我們實(shí)現(xiàn)下拉加載功能，都會(huì)用到這個(gè)屬性，提到它我們當(dāng)然就要提到onEndReachedThreshold，在FlatList中onEndReachedThreshold是一個(gè)number類型，是一個(gè)他表示具體底部還有多遠(yuǎn)時(shí)觸發(fā)onEndReached，需要注意的是FlatList和ListView中的onEndReachedThreshold表示的含義是不同的，在ListView中onEndReachedThreshold表示具體底部還有多少像素時(shí)觸發(fā)onEndReached，默認(rèn)值是1000。而FlatList中表示的是一個(gè)倍數(shù)（也稱比值，不是像素），默認(rèn)值是2。

那么按照常規(guī)我們看下面實(shí)現(xiàn)

      <FlatList
        data={this.state.dataList}
        extraData={this.state}
        refreshing={this.state.isRefreshing}
        onRefresh={() => this._onRefresh()}
        ItemSeparatorComponent={() => <View style={{
          height: 1,
          backgroundColor: '#D6D6D6'
        }}/>}
        renderItem={this._renderItem}
        ListEmptyComponent={this.emptyComponent}
        onEndReached={() => this._onEndReached()}
        onEndReachedThreshold={0.1}/>

然后我們?cè)赾omponentDidMount中加入下面代碼

  componentDidMount() {
    this._onRefresh()
  }

也就是進(jìn)入開始加載第一頁(yè)數(shù)據(jù)，下拉的執(zhí)行onEndReached加載更多數(shù)據(jù)，并更新數(shù)據(jù)源dataList?？雌饋硎峭昝赖?，不過.....運(yùn)行后你會(huì)發(fā)現(xiàn)onEndReached一直循環(huán)調(diào)用（或多次執(zhí)行），有可能直到所有數(shù)據(jù)加載完成，原因可能大家也能猜到了，因?yàn)開onRefresh加載數(shù)據(jù)需要時(shí)間，在數(shù)據(jù)請(qǐng)求到之前render方法執(zhí)行，由于此時(shí)沒有數(shù)據(jù)，onEndReached方法執(zhí)行一次，那么此時(shí)相當(dāng)于加載了兩次數(shù)據(jù)。

至于onEndReached執(zhí)行多少次就需要onEndReachedThreshold的值來定了，所以我們一定要慎重設(shè)置onEndReachedThreshold，如果你要是理解成了設(shè)置像素，設(shè)置成了一個(gè)比較大的數(shù)，比如100，那完蛋了....個(gè)人感覺設(shè)置0.1是比較好的值。

通過上面的分析，個(gè)人感覺有必要對(duì)FlatList進(jìn)行一次二次封裝了，根據(jù)自己的需求我進(jìn)行了一次二次封裝

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 : <ListEmptyComponent/>
    } else {
      emptyContent = <Text style={styles.emptyText}>暫無(wú)數(shù)據(jù)下拉刷新</Text>;
    }
    if (ItemSeparatorComponent) {
      separatorComponent = React.isValidElement(ItemSeparatorComponent) ? ItemSeparatorComponent :
        <ItemSeparatorComponent/>
    } else {
      separatorComponent = <View style={{height: 1, backgroundColor: '#D6D6D6'}}/>;
    }
    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 <FlatList
      {...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={() => <View
        style={{
          height: this.state.listHeight,
          width: '100%',
          alignItems: 'center',
          justifyContent: 'center'
        }}>{emptyContent}</View>}
    />
  }

  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.props.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 = (
        <View style={styles.footerStyle}>
          <ActivityIndicator size="small" color="#888888"/>
          <Text style={styles.footerText}>數(shù)據(jù)加載中…</Text>
        </View>
      )
    }
    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對(duì)refreshing類型進(jìn)行限定，如果ListEmptyComponent有定義，就是使用自定義分View,同理ItemSeparatorComponent也可以自定義。

在下拉加載數(shù)據(jù)時(shí)定義了一個(gè)ListFooterComponent，用于提示用戶正在加載數(shù)據(jù)，refreshing屬性如果是boolean的話，表示沒有下拉加載功能，如果是number類型，pageSize必須傳，數(shù)據(jù)源長(zhǎng)度與pageSize取余是否等于0,判斷是否有更多數(shù)據(jù)（最后一次請(qǐng)求的數(shù)據(jù)等于pageSize時(shí)才有更多數(shù)據(jù)，小于就不用回調(diào)onEndReached）。當(dāng)然上面的代碼也很簡(jiǎn)單，相信很容易看懂，其它就不多介紹了。以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: