ReactNative Flatlist onEndReached 不工作
ReactNative Flatlist onEndReached not working
我正在尝试调用 FlatList 的 onEndReached
上的函数,但它不起作用。
我最后调用了 this.state.pageNo
,它没有更新。我想稍后在无限滚动中使用这个逻辑,但现在无法让它工作。
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Button,
TouchableOpacity,
FlatList,
Alert
} from "react-native";
class InfiniteScrollRedux extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
pageNo: 1,
data: [
{ id: 1, name: "Name01" },
{ id: 2, name: "Name02" },
{ id: 3, name: "Name03" },
{ id: 4, name: "Name04" },
{ id: 5, name: "Name05" },
{ id: 6, name: "Name06" }
]
};
}
myFunction = () => {
this.setState({ pageNo: this.state.pageNo++ });
};
render() {
return (
<View>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<View style={mystyle.mainCard}>
<Text style={mystyle.titleText}> {item.id} </Text>
<View style={{ marginTop: 200 }} />
<Text style={mystyle.nameText}> {item.name} </Text>
</View>
)}
keyExtractor={item => item.id}
onEndReached={this.myFunction}
onEndThreshold={0}
/>
<Text style={{ margin: 20, padding: 20, fontSize: 20 }}>
{this.state.pageNo}
</Text>
</View>
);
}
}
const mystyle = StyleSheet.create({
mainCard: {
backgroundColor: "#2F4F4F",
marginBottom: 1,
padding: 5
},
titleText: {
fontSize: 20,
color: "#F0FFFF"
},
nameText: {
fontSize: 14,
color: "#F0FFFF"
}
});
export default InfiniteScrollRedux;
这里有一个问题:https://github.com/facebook/react-native/issues/14312。看来很多人都有同样的经历。有人建议将 onEndReachedThreshold
的值更改为大于 0,例如:0.3.
您在 FlatList 中查找的 属性 是 onEndReachedThreshold 而不是 onEndThreshold。
首先,你应该确保你的 onEndReached
听从你的 onMomentumScrollBegin
和 onMomentumScrollEnd
道具 FlatList
。另一个重要的事情是 distanceFromEnd
参数 onEndReached
道具 FaltList
。所以你可以这样使用它:
onMomentumScrollBegin={() => this.setState({ scrollBegin: true })}
onMomentumScrollEnd={() => this.setState({ scrollBegin: false })}
onEndReached={({ distanceFromEnd }) =>
distanceFromEnd<=0.5&&
this.state.scrollBegin &&
this.onEndReached()
}
然后您可以定义 onEndReached
函数,它将根据需要运行。
希望这会帮助某人节省时间。
在我的例子中,问题出在 nativebase <Content>
。当在其中使用 <FlatList>
时,它会产生问题。解决方案:
<Content
style={{flex: 1}}
contentContainerStyle={{flex: 1}} // important!
>
被这个问题困扰了很久。我认为 React
在计算屏幕高度与容器高度时存在混淆。
所以我们能做的最好的事情就是将 onEndReachedThreshold
值增加到高于 0
到 0.2, 0.4
等
用于提高 onEndReached 性能
我建议为 contentContainerStyle 提供准确的高度
例如:
contentContainerStyle={{ height : items.length * itemHeight }}
我正在尝试调用 FlatList 的 onEndReached
上的函数,但它不起作用。
我最后调用了 this.state.pageNo
,它没有更新。我想稍后在无限滚动中使用这个逻辑,但现在无法让它工作。
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Button,
TouchableOpacity,
FlatList,
Alert
} from "react-native";
class InfiniteScrollRedux extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
pageNo: 1,
data: [
{ id: 1, name: "Name01" },
{ id: 2, name: "Name02" },
{ id: 3, name: "Name03" },
{ id: 4, name: "Name04" },
{ id: 5, name: "Name05" },
{ id: 6, name: "Name06" }
]
};
}
myFunction = () => {
this.setState({ pageNo: this.state.pageNo++ });
};
render() {
return (
<View>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<View style={mystyle.mainCard}>
<Text style={mystyle.titleText}> {item.id} </Text>
<View style={{ marginTop: 200 }} />
<Text style={mystyle.nameText}> {item.name} </Text>
</View>
)}
keyExtractor={item => item.id}
onEndReached={this.myFunction}
onEndThreshold={0}
/>
<Text style={{ margin: 20, padding: 20, fontSize: 20 }}>
{this.state.pageNo}
</Text>
</View>
);
}
}
const mystyle = StyleSheet.create({
mainCard: {
backgroundColor: "#2F4F4F",
marginBottom: 1,
padding: 5
},
titleText: {
fontSize: 20,
color: "#F0FFFF"
},
nameText: {
fontSize: 14,
color: "#F0FFFF"
}
});
export default InfiniteScrollRedux;
这里有一个问题:https://github.com/facebook/react-native/issues/14312。看来很多人都有同样的经历。有人建议将 onEndReachedThreshold
的值更改为大于 0,例如:0.3.
您在 FlatList 中查找的 属性 是 onEndReachedThreshold 而不是 onEndThreshold。
首先,你应该确保你的 onEndReached
听从你的 onMomentumScrollBegin
和 onMomentumScrollEnd
道具 FlatList
。另一个重要的事情是 distanceFromEnd
参数 onEndReached
道具 FaltList
。所以你可以这样使用它:
onMomentumScrollBegin={() => this.setState({ scrollBegin: true })}
onMomentumScrollEnd={() => this.setState({ scrollBegin: false })}
onEndReached={({ distanceFromEnd }) =>
distanceFromEnd<=0.5&&
this.state.scrollBegin &&
this.onEndReached()
}
然后您可以定义 onEndReached
函数,它将根据需要运行。
希望这会帮助某人节省时间。
在我的例子中,问题出在 nativebase <Content>
。当在其中使用 <FlatList>
时,它会产生问题。解决方案:
<Content
style={{flex: 1}}
contentContainerStyle={{flex: 1}} // important!
>
被这个问题困扰了很久。我认为 React
在计算屏幕高度与容器高度时存在混淆。
所以我们能做的最好的事情就是将 onEndReachedThreshold
值增加到高于 0
到 0.2, 0.4
等
用于提高 onEndReached 性能 我建议为 contentContainerStyle 提供准确的高度 例如:
contentContainerStyle={{ height : items.length * itemHeight }}