反應原生FlatListonEndReached()自動觸發

我正在做一個 React Native 專案我在使用加載更多資料時遇到了問題

當我將父組件的高度設定為500時，如我的代碼所示，滾動功能例外。我不能在模擬器中用左滑鼠或在真機中用手指自由上下滾動，scrollview的視窗被限制為500

當我不設定父組件的高度或設定高度 100% 時，我可以無限制地上下滾動，但是 onEndReached() 作為我的代碼每秒自動觸發。實際上，我根本不滾動

這是我的代碼

     data = [{ID: '1', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: '-10', STATUS: '0'}, 
                {ID: '2', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '0'},
                {ID: '3', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '4', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '5', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '6', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '7', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '8', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '9', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '10', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'}            
                ]


    _renderItem = (item) => {
        let { ID, TITLE, DATE, VALUE, STATUS } = item.item
        return (
            <View key={ID} style={{backgroundColor: 'white',alignItems:'center', justifyContent:'center',marginBottom: 1, height: (widthScroll / widthConst) * 138}}>
        <TouchableOpacity 
            activeOpacity={1}
            style={{width:  (widthScroll / widthConst) * 700}}
        >
            <View style={{}}> 
                <View style={{}}>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                        <Text style={{fontSize: (widthScroll / widthConst) * 32, color: '#333333'}}>{TITLE}</Text>
                        <Text style={{fontSize: (widthScroll / widthConst) * 40, color: '#333333'}}>{VALUE}</Text>
                    </View>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', marginTop:  (widthScroll / widthConst) * 3}}>
                        <Text style={{fontSize: (widthScroll / widthConst) * 28, color: '#888888'}}>{DATE}</Text>
                        <Text style={{fontSize: (widthScroll / widthConst) * 28, color: '#888888')}}>{STATUS}</Text>
                    </View>
                </View>
            </View>
        </TouchableOpacity>
    </View>
        );
    }




    _onLoadMore = () => {
        this.timer1 = setTimeout(()=>{
            let dataExtra = [{ID: '11', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: this.state.count, STATUS: '0'}]
            let data = this.state.data.concat(dataExtra);
            this.setState({data:data, count: this.state.count   1});
        }, 1000);
    }

    render(){

        return(
            <View style={{flex:1, height: 500}}>
                <View style={{height: '100%'}}>
                    <FlatList
                    ref={(c)=>this.flatList=c}
                    style={{flex:1}}
                    renderItem={this._renderItem}
                    data={this.state.data}
                    onEndReachedThreshold={0.01}
                    onEndReached={() => this._onLoadMore()}
            />    
                </View>
                
            </View>
            
        );
    }

uj5u.com熱心網友回復：

試試這個

onEndReached={() => data.length >= pageSize && this._onLoadMore()}    


 _onLoadMore = () => {
        this.timer1 = setTimeout(()=>{
            let dataExtra = [{ID: '11', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: this.state.count, STATUS: '0'}]
            let data = this.state.data.concat(dataExtra);
            this.setState({data:data, pageSize:this.state.pageSize   10, count: this.state.count   1});
        }, 1000);
    }

uj5u.com熱心網友回復：

試試這個代碼.....

onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
if(distanceFromEnd >= 0) {
     //Call pagination function
}
}}

或者

onMomentumScrollEnd而不是onEndReached，像這樣：

  onMomentumScrollEnd={() => { // fetchData}}

它可能不會prop在 react-native 檔案中寫成 available ，但是如果您會看到 的源代碼FlatList，它會使用Virtualized List which 作為回報，具有提到的 prop available。

標籤：反应原生 react-native-flatlist 平单

上一篇：我如何將以下代碼類轉換為函陣列件

下一篇：JetpackCompose-使影像縮放到列/行中的可用大小