在RN中FlatList是一個高性能的列表組件，它是ListView組件的升級版，性能方面有了很大的提升，當(dāng)然也就建議大家在實現(xiàn)列表功能時使用FlatList,盡量不要使用ListView，更不要使用ScrollView。既然說到FlatList，那就先溫習(xí)一下它支持的功能。
今天的這篇文章不具體介紹如何使用，如果想看如何使用，可以參考我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 }}>暫無數(shù)據(jù)下拉刷新</Text> </View> }在上面的代碼，我們主要看一下ListEmptyComponent，它表示沒有數(shù)據(jù)的時候填充的布局，一般情況我們會在中間顯示顯示一個提示信息，為了介紹方便就簡單展示一個暫無數(shù)據(jù)下拉刷新。上面代碼看起來是暫無數(shù)據(jù)居中顯示，但是運行后，你傻眼了，暫無數(shù)據(jù)在最上面中間顯示，此時高度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)部實行是ScrollView）是舊的ListView實現(xiàn)方式，VirtualizedList是新的性能比較好的實現(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}], },上面的樣式就是添加了一個動畫，并沒有設(shè)置高度，所以我們在ListEmptyComponent使用height:'100%'或者flex:1都沒有效果，都沒有撐起高度。
為了實現(xiàn)我們想要的效果，我們需要將height設(shè)置為具體的值。那么該值設(shè)置多大呢？你如果給FlatList設(shè)置一個樣式，背景屬性設(shè)置一個顏色，發(fā)現(xiàn)FlatList是默認有占滿剩余屏的高度的（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 }}>暫無數(shù)據(jù)</Text> </View> }通過上面的調(diào)整發(fā)現(xiàn)在Android上運行時達到我們想要的效果了，但是在iOS上，不可控，偶爾居中顯示，偶爾又顯示到最上面。原因就是在iOS上onLayout調(diào)用的時機與Android略微差別(iOS會出現(xiàn)emptyComponent渲染時onLayout還沒有回調(diào)，此時fHeight還沒有值)。
所以為了將變化后的值作用到emptyComponent，我們將fHeight設(shè)置到state中
state={ fHeight:0}onLayout={e => this.setState({fHeight: e.nativeEvent.layout.height})}這樣設(shè)置后應(yīng)該完美了吧，可是....在android上依然能完美實現(xiàn)我們要的效果，在iOS上出現(xiàn)了來回閃屏的的問題。打印log發(fā)現(xiàn)值一直是0和測量后的值來回轉(zhuǎn)換。在此處我們僅僅需要是測量的值，所以我們修改onLayout
onLayout={e => { let height = e.nativeEvent.layout.height; if (this.state.fHeight < height) { this.setState({fHeight: height}) } }}經(jīng)過處理后，在ios上終于完美的實現(xiàn)我們要的效果了。
除了上面的坑之外，個人感覺還有一個坑就是onEndReached，如果我們實現(xiàn)下拉加載功能，都會用到這個屬性，提到它我們當(dāng)然就要提到onEndReachedThreshold，在FlatList中onEndReachedThreshold是一個number類型，是一個他表示具體底部還有多遠時觸發(fā)onEndReached，需要注意的是FlatList和ListView中的onEndReachedThreshold表示的含義是不同的，在ListView中onEndReachedThreshold表示具體底部還有多少像素時觸發(fā)onEndReached，默認值是1000。而FlatList中表示的是一個倍數(shù)（也稱比值，不是像素），默認值是2。
那么按照常規(guī)我們看下面實現(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}/>然后我們在componentDidMount中加入下面代碼
componentDidMount() { this._onRefresh() }也就是進入開始加載第一頁數(shù)據(jù)，下拉的執(zhí)行onEndReached加載更多數(shù)據(jù)，并更新數(shù)據(jù)源dataList。看起來是完美的，不過.....運行后你會發(fā)現(xiàn)onEndReached一直循環(huán)調(diào)用（或多次執(zhí)行），有可能直到所有數(shù)據(jù)加載完成，原因可能大家也能猜到了，因為_onRefresh加載數(shù)據(jù)需要時間，在數(shù)據(jù)請求到之前render方法執(zhí)行，由于此時沒有數(shù)據(jù)，onEndReached方法執(zhí)行一次，那么此時相當(dāng)于加載了兩次數(shù)據(jù)。
至于onEndReached執(zhí)行多少次就需要onEndReachedThreshold的值來定了，所以我們一定要慎重設(shè)置onEndReachedThreshold，如果你要是理解成了設(shè)置像素，設(shè)置成了一個比較大的數(shù)，比如100，那完蛋了....個人感覺設(shè)置0.1是比較好的值。
通過上面的分析，個人感覺有必要對FlatList進行一次二次封裝了，根據(jù)自己的需求我進行了一次二次封裝
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}>暫無數(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對refreshing類型進行限定，如果ListEmptyComponent有定義，就是使用自定義分View,同理ItemSeparatorComponent也可以自定義。
在下拉加載數(shù)據(jù)時定義了一個ListFooterComponent，用于提示用戶正在加載數(shù)據(jù)，refreshing屬性如果是boolean的話，表示沒有下拉加載功能，如果是number類型，pageSize必須傳，數(shù)據(jù)源長度與pageSize取余是否等于0,判斷是否有更多數(shù)據(jù)（最后一次請求的數(shù)據(jù)等于pageSize時才有更多數(shù)據(jù)，小于就不用回調(diào)onEndReached）。當(dāng)然上面的代碼也很簡單，相信很容易看懂，其它就不多介紹了。以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
