我正在使用react-native-flatlist网格滚动来自服务器的最大数据并获取并显示在我的屏幕上。但我的应用程序中的滚动并不流畅。
有什么解决办法吗?
滚动屏幕时我也面临着空白。列表消失并在 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)}
/>
)
}