平面列表滚动运行不畅,在Reaction本机应用程序中滚动文字列表时显示空白 [英] Flatlist scroll is not working smoothly and shows an empty white space while scrolling a lagelist in react-native app
本文介绍了平面列表滚动运行不畅,在Reaction本机应用程序中滚动文字列表时显示空白的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Reaction-Native-Flat列表网格滚动来自服务器的最大数据,并获取并显示在我的屏幕上。但在我的应用程序中,滚动并不流畅。
有什么解决方案吗?
滚动屏幕时,我也面临空白。List Get消失,并在UI中显示空白。
有解决方案吗?
import React, { Component } from 'react';
import {
ActivityIndicator,
Image,
Platform,
StyleSheet,
Text,
FlatList,
Button,
View,
SafeAreaView,
ScrollView,
TouchableOpacity,
PixelRatio,
Dimensions,
StatusBar
} from 'react-native';
import _ from 'lodash';
import ImageCropPicker from 'react-native-image-crop-picker';
import Orientation from 'react-native-orientation';
import FastImage from 'react-native-fast-image';
class MyShowroom extends Component {
constructor() {
super();
this.state = {
index: 0,
section: 0,
width: 0,
height: 0,
isPageLoaded: false,
loadingMoreItems: false,
lastItemIndex: 0,
page: 0,
}
Orientation.addOrientationListener(this._updateOrientation.bind(this))
}
renderList(item) {
return(
<TouchableOpacity>
<View style={{backgroundColor: 'white', alignItems: 'center'}}>
<FastImage style={{width: gridWidth, height: gridHeight}}
resizeMode={FastImage.resizeMode.contain}
source={item.uri}/>
</View>
</TouchableOpacity>
);
}
// extra data is rendering from the redux
render(){
return(
<FlatList
ref={(ref) => { this.flatListRef = ref; }}
data={Items}
renderItem={({ item }) => this.renderList(item)}
numColumns={2}
extraData={this.props.pagination}
keyExtractor={item => item.id}
onEndReached={this._handleMoreItems}
onEndReachedThreshold={0.001}
ListFooterComponent={this._renderFooter}
legacyImplementation = {true}
bounces = {false}
onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}
/>
)
}
推荐答案
这是由于FlatList组件的性能问题造成的,但您可以将以下道具添加到您的FlatList组件中,这将有助于解决问题。 它们是: I.删除ClipedSubview。将其设置为True,则默认设置为False。 二、窗口大小。将其设置为类似于30的数字 三、MaxToRenderPerBatch。这控制每批呈现的项目数, 它是在每个卷轴上呈现的下一块项目。
<FlatList
data={this.state.contacts}
removeClippedSubviews={true}
maxToRenderPerBatch={60}
windowSize={30}
ListHeaderComponent={headerComponent}
contentContainerStyle={{ paddingBottom: 10 }}
renderItem={({ item }) => (
<View>
{item}
</View>
)}
numColumns={1}
keyExtractor={(item, index) => String(index)}
/>
这篇关于平面列表滚动运行不畅,在Reaction本机应用程序中滚动文字列表时显示空白的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文