Плоский лист пропадает при прокрутке экрана, если он содержит самые большие данные в естественном режиме - PullRequest
Новая
       20

Плоский лист пропадает при прокрутке экрана, если он содержит самые большие данные в естественном режиме

0 голосов
/ 04 ноября 2019

Я использую ответный-родной-плоский список для прокрутки самых больших данных с сервера, их выборки и отображения на моем экране. Но здесь я сталкиваюсь с двумя проблемами.

Прокрутка не плавная

При прокрутке самых больших данных отображается пробел.

Это мой пример кода. 

componentDidMount() {
    let { page } = this.state;
    this.props.fetchAllItems();
    if (page == 0) {
        page = page + 1;
        this.setState({page: page})
        this.props.fetchItemsPerPage(page);
    }
}

renderList(){ 
    return(
        <TouchableOpacity activeOpacity = { .5 } >
            <View style={{backgroundColor: 'white', alignItems: 'center'}}>
                <FastImage style={{width: deviceWidth, height: deviceWidth}} source={item.uri}/>
             </View>
        </TouchableOpacity>
    ); 
}

_renderFooter(){ return <ActivityIndicator color="#000000" style = {{marginBottom:10, marginTop:10}}/>; }

shouldItemUpdate(){
    return false;
}

renderListItems(){
    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}
            maxToRenderPerBatch={10}
            initialNumToRender = {14}
            shouldComponentUpdate= {this.shouldItemUpdate()}
            onEndReachedThreshold={0.001}
            ListFooterComponent={this._renderFooter}
            legacyImplementation = {true}
            bounces = {false}
            onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}/>
    )
}

render(){
    return(
        {this.renderListItems()} 
    ) 
}
...