如何解决在 TouchableOpacity 按钮Flatlist 内中呈现 AcitivityIndicator 以显示下一页正在加载
(react-native-cli: 2.0.1 反应原生:0.63.2)
我编写了一个包含大量内容的指南,这意味着在页面之间导航(在 StackNavigator 内)需要一些时间。我不希望我的按钮只是冻结等待呈现下一页,所以我想在顶部(并居中)显示一个 ActivityIndicator。 请注意,我有一个包含许多 TouchableOpacity 的 Flatlist。
我认为有两种方法,但它们不会产生正确的结果。 首先,在调用 onPress 时,我想设置一个状态以使用 ActivityIndicator 重新呈现我的页面,并且通过回调,我想在显示 ActivityIndicator 后开始导航。
<TouchableOpacity
onPress={() => {
this.setState({hasClicked:true},navigation.navigate("nextPage"))
}}>
</TouchableOpacity>
注意:hasClicked=true是调用render时显示ActivityIndicator的条件。
第二种方法是使用componentDidUpdate
<TouchableOpacity
onPress={() => {
this.setState({hasClicked:true})
}}>
</TouchableOpacity>
...
componentDidUpdate () {
if (this.state.hasClicked) {
navigation.navigate("nextPage")
}
}
两者都会产生相同的不良行为:当我点击 TouchableOpacity 按钮时,导航立即开始(冻结屏幕),然后加载下一页。当我回到初始页面时,我可以看到 ActivityIndicator。
我不明白我在这里遗漏了什么。
请注意,我找到了一种解决方法,但这并不完全是我想要的:
<TouchableOpacity
onPressIn={() => {
this.setState({hasClicked:true})
}}
onPressOut={() => {
navigation.navigate("nextPage")
this.setState({hasClicked:false})
}}
>
</TouchableOpacity>
使用此代码,我在导航之前获得了在显示 ActivityIndicator 方面我想要的内容,但是由于 onPressIn 和 onPressOut 始终触发,因此无法滚动,它们在滚动(在 FlatList 内)和实际之间没有区别点击。 onPress 有所不同,但我展示的前两段代码不起作用(而且他们甚至还没有尝试处理 ActivityIndicator 在导航后应该消失的事实)。
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。