ReactNative 之FlatList踩坑封裝總結

Code4Android發表於2018-03-12
React封裝

在RN中FlatList是一個高效能的列表元件，它是ListView元件的升級版，效能方面有了很大的提升，當然也就建議大家在實現列表功能時使用FlatList,儘量不要使用ListView，更不要使用ScrollView。既然說到FlatList，那就先溫習一下它支援的功能。

  • 完全跨平臺。

  • 支援水平佈局模式。

  • 行元件顯示或隱藏時可配置回撥事件。

  • 支援單獨的頭部元件。

  • 支援單獨的尾部元件。

  • 支援自定義行間分隔線。

  • 支援下拉重新整理。

  • 支援上拉載入。

  • 支援跳轉到指定行（ScrollToIndex）。

今天的這篇文章不具體介紹如何使用，如果想看如何使用，可以參考我GitHub https://github.com/xiehui999/helloReactNative的一些示例。今天的這篇文章主要介紹我使用過程中感覺比較大的坑，並對FlatList進行的二次封裝。 接下來，我們先來一個簡單的例子。我們文章也有這個例子開始探討。

        <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
            }}>暫無資料下拉重新整理</Text>
        </View>
    }
複製程式碼

在上面的程式碼，我們主要看一下ListEmptyComponent，它表示沒有資料的時候填充的佈局，一般情況我們會在中間顯示顯示一個提示資訊，為了介紹方便就簡單展示一個暫無資料下拉重新整理。上面程式碼看起來是暫無資料居中顯示，但是執行後，你傻眼了，暫無資料在最上面中間顯示，此時高度100%並沒有產生效果。當然你嘗試使用flex:1，將View的高檢視填充剩餘全屏，不過依然沒有效果。

那為什麼設定了沒有效果呢，既然好奇，我們就來去原始碼看一下究竟。原始碼路徑在react-native-->Libraries-->Lists。列表的元件都該目錄下。我們先去FlatList檔案搜尋關鍵詞ListEmptyComponent，發現該元件並沒有被使用，那就繼續去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（內部實行是ScrollView）是舊的ListView實現方式，VirtualizedList是新的效能比較好的實現。我們去該檔案

    //省略部分程式碼
    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}],
  },
複製程式碼

上面的樣式就是新增了一個動畫，並沒有設定高度，所以我們在ListEmptyComponent使用height:'100%'或者flex:1都沒有效果，都沒有撐起高度。

為了實現我們想要的效果，我們需要將height設定為具體的值。那麼該值設定多大呢？你如果給FlatList設定一個樣式，背景屬性設定一個顏色，發現FlatList是預設有佔滿剩餘屏的高度的（flex：1）。那麼我們可以將ListEmptyComponent中view的高度設定為FlatList的高度，要獲取FlatList的高度，我們可以通過onLayout獲取。 程式碼調整：

//建立變數
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
            }}>暫無資料</Text>
        </View>
    }
複製程式碼

通過上面的調整發現在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。 那麼按照常規我們看下面實現

            <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}/>
複製程式碼

然後我們在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 : <ListEmptyComponent/>
        } else {
            emptyContent = <Text style={styles.emptyText}>暫無資料下拉重新整理</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}>資料載入中…</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對refreshing型別進行限定，如果ListEmptyComponent有定義，就是使用自定義分View,同理ItemSeparatorComponent也可以自定義。

在下拉載入資料時定義了一個ListFooterComponent，用於提示使用者正在載入資料，refreshing屬性如果是boolean的話，表示沒有下拉載入功能，如果是number型別，pageSize必須傳，資料來源長度與pageSize取餘是否等於0,判斷是否有更多資料（最後一次請求的資料等於pageSize時才有更多資料，小於就不用回撥onEndReached）。當然上面的程式碼也很簡單，相信很容易看懂，其它就不多介紹了。有問題歡迎指出。原始碼地址

相關文章