Question

我的FlatList触发onendreached异常。 onEndReached一次又一次被调用。我已经阅读了一些有关在flex：1的视图中包装平面列表的建议，但是我仍然无法正常工作。此外，删除scrollView也无效-

这无济于事https://github.com/GeekyAnts/NativeBase/issues/1736#issuecomment-401815949

<View style={baseStyles.body}>
    <View style={{flexDirection:"row", backgroundColor:theme.button.tertiary}}>
        <View style={{flex:1}}>
            <SearchBar
                onChangeText={(query) => this.setState({query})}
                placeholder='Hier suchen...' 
                showLoading
            />
        </View>
    </View>
    <View style={{flex:1}}>
        <ScrollView style={{flex: 1, flexDirection:'column'}}> 
            <View style={{flex:1}}>
                <FlatList
                data={articlesData}
                renderItem={renderFunction}
                onEndReached={this._onEndReached}
                onEndThreshold={0}
                refreshing={this.state.isLoading}
                onRefresh={this.onRefresh}
                keyExtractor={item => item.slug}
                />
            </View>
            <View style={{marginBottom:10}}>
                <Text style={{color:this.state.theme.text.primary,textAlign:"center",fontSize:16}}>Gefunden: {rowCount}</Text>
            </View>
        </ScrollView>
    </View>
</View>

Answer 1

如果正在加载或出错，则可以尝试使用onEndReached={this.state.isLoading ? () => {} : this._onEndReached};只是让onEndReached在加载状态时不执行任何操作。我尝试过服务器方式（去抖动，等待setState，使用标志），但是只有这种方式才能按预期工作。

<View style={baseStyles.body}>
    <View style={{flexDirection:"row", backgroundColor:theme.button.tertiary}}>
        <View style={{flex:1}}>
            <SearchBar
                onChangeText={(query) => this.setState({query})}
                placeholder='Hier suchen...' 
                showLoading
            />
        </View>
    </View>
    <View style={{flex:1}}>
        <ScrollView style={{flex: 1, flexDirection:'column'}}> 
            <View style={{flex:1}}>
                <FlatList
                data={articlesData}
                renderItem={renderFunction}
                onEndReached={this.state.isLoading ? () => {} : this._onEndReached}
                onEndThreshold={0}
                refreshing={this.state.isLoading}
                onRefresh={this.onRefresh}
                keyExtractor={item => item.slug}
                />
            </View>
            <View style={{marginBottom:10}}>
                <Text style={{color:this.state.theme.text.primary,textAlign:"center",fontSize:16}}>Gefunden: {rowCount}</Text>
            </View>
        </ScrollView>
    </View>
</View>

FlatList onendreached无限期触发

1 个答案: