平面列表问题中的 onEndReached
onEndReached in Flatlist issue
如果我将平面列表包含在一个视图中,那么我的 onEndReached 会无限触发,如果我删除封闭的视图 onEndReached 根本不会被触发。
render() {
return (
<Root>
<Container>
<Content>
<View>
{this.state.listView && (
<FlatList
data={this.state.variants}
keyExtractor={this._keyExtractor}
onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
console.log(
"on end reached ",
distanceFromEnd
);
this.loadMore();
}}
numColumns={1}
renderItem={({ item, index }) => (
<CatalogRow
item={item}
in_wishlist={this.state.in_wishlist}
toggleWishlist={() =>
this.toggleWishlist(item.title)
}
listView={this.state.listView}
/>
)}
/>
)}
</View>
</Content>
</Container>
</Root>
);
}
而我的 distanceFromEnd
在触发时采用诸如 0 、 960,1200 之类的值。它说明了什么?
我正在使用 react-native 0.47.2
我会这样使用它:
handleMore = () => {
// fetch more here
};
<FlatList
onEndReached={this.handleMore}
/>
这是因为包含 <Content>
标签。有时将 react-native 标签与 native-base 标签嵌入会导致此类问题。我用 View
标签替换了内容和容器标签,现在它工作正常。
我对 RN 0.52 有同样的问题
这看起来像是因为 Flatlist 找不到高度。所以他找不到列表的末尾。
通过使用 flex=1
的视图包装平面列表来修复
<View style={{flex: 1}} > <Flatlist /> <View>
我对 react-native 0.50.3 有同样的问题
<Flatlist>
不能用在<ScrollView>
中,如果要使用onEndReached
,因为Flatlist找不到高度。
使用 <View>
代替
如果我将平面列表包含在一个视图中,那么我的 onEndReached 会无限触发,如果我删除封闭的视图 onEndReached 根本不会被触发。
render() {
return (
<Root>
<Container>
<Content>
<View>
{this.state.listView && (
<FlatList
data={this.state.variants}
keyExtractor={this._keyExtractor}
onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
console.log(
"on end reached ",
distanceFromEnd
);
this.loadMore();
}}
numColumns={1}
renderItem={({ item, index }) => (
<CatalogRow
item={item}
in_wishlist={this.state.in_wishlist}
toggleWishlist={() =>
this.toggleWishlist(item.title)
}
listView={this.state.listView}
/>
)}
/>
)}
</View>
</Content>
</Container>
</Root>
);
}
而我的 distanceFromEnd
在触发时采用诸如 0 、 960,1200 之类的值。它说明了什么?
我正在使用 react-native 0.47.2
我会这样使用它:
handleMore = () => {
// fetch more here
};
<FlatList
onEndReached={this.handleMore}
/>
这是因为包含 <Content>
标签。有时将 react-native 标签与 native-base 标签嵌入会导致此类问题。我用 View
标签替换了内容和容器标签,现在它工作正常。
我对 RN 0.52 有同样的问题
这看起来像是因为 Flatlist 找不到高度。所以他找不到列表的末尾。
通过使用 flex=1
的视图包装平面列表来修复<View style={{flex: 1}} > <Flatlist /> <View>
我对 react-native 0.50.3 有同样的问题
<Flatlist>
不能用在<ScrollView>
中,如果要使用onEndReached
,因为Flatlist找不到高度。
使用 <View>
代替