在 TouchableOpacity 按钮Flatlist 内中呈现 AcitivityIndi​​cator 以显示下一页正在加载

编程问答 2022-05-28

问题描述

(react-native-cli: 2.0.1 反应原生：0.63.2)

我编写了一个包含大量内容的指南，这意味着在页面之间导航（在 StackNavigator 内）需要一些时间。我不希望我的按钮只是冻结等待呈现下一页，所以我想在顶部（并居中）显示一个 ActivityIndi​​cator。 请注意，我有一个包含许多 TouchableOpacity 的 Flatlist。

我认为有两种方法，但它们不会产生正确的结果。 首先，在调用 onPress 时，我想设置一个状态以使用 ActivityIndi​​cator 重新呈现我的页面，并且通过回调，我想在显示 ActivityIndi​​cator 后开始导航。

<TouchableOpacity
  onPress={() => {
    this.setState({hasClicked:true},navigation.navigate("nextPage"))
  }}>
</TouchableOpacity>

注意：hasClicked=true是调用render时显示ActivityIndi​​cator的条件。

第二种方法是使用componentDidUpdate

<TouchableOpacity
  onPress={() => {
    this.setState({hasClicked:true})
  }}>
</TouchableOpacity>

...

componentDidUpdate () {
  if (this.state.hasClicked) {
    navigation.navigate("nextPage")
  }
}

两者都会产生相同的不良行为：当我点击 TouchableOpacity 按钮时，导航立即开始（冻结屏幕），然后加载下一页。当我回到初始页面时，我可以看到 ActivityIndi​​cator。

我不明白我在这里遗漏了什么。

请注意，我找到了一种解决方法，但这并不完全是我想要的：

<TouchableOpacity
  onPressIn={() => {
    this.setState({hasClicked:true})
  }}
  onPressOut={() => {
    navigation.navigate("nextPage")
    this.setState({hasClicked:false})
  }}
>
</TouchableOpacity>

使用此代码，我在导航之前获得了在显示 ActivityIndi​​cator 方面我想要的内容，但是由于 onPressIn 和 onPressOut 始终触发，因此无法滚动，它们在滚动（在 FlatList 内）和实际之间没有区别点击。 onPress 有所不同，但我展示的前两段代码不起作用（而且他们甚至还没有尝试处理 ActivityIndi​​cator 在导航后应该消失的事实）。

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

activity-indicatoronpressreact-nativereact-native-flatlisttouchableopacity