我正在使用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)}
/>
)
}
我也面临着,在滚动列表时出现空白页的问题。在flatlist中添加scrollview之后,现在可以正常工作了。在这里,请检查我的代码可能会有帮助。
<View style={{ flex: 1}}>
<FlatList
data={data }
renderItem={({ item }) => <this.Item item={item} />}
keyExtractor={item => item.id}
/>