Question

我正在componentDidMount列出屏幕A中的一组文件（图像），从该屏幕AI到另一个屏幕B链接，在这里我可以看到文件的详细视图，并且可以选择删除文档。

使用

调用屏幕A时

  <TouchableOpacity style={Styles.HomeButton} onPress={ () => this.props.navigation.navigate('Gallery')}>
     <Text style={Styles.HomeButtonText}>View Photos</Text>
  </TouchableOpacity>

componentDidMount工作正常，但是当我在取消链接回调中删除文件（我正在使用react-native-fs）时，我就像在导航一样

this.props.navigation.navigate('Gallery');

重定向到屏幕A可以正常工作，但是componentDidMount无法正常工作，这意味着我仍然可以在列表中看到该已删除文件。即屏幕A没有刷新，是否有可能的解决方法？

Answer 1

在反应导航中，如果您导航到其他屏幕，则不会卸载组件，除非您在堆栈导航中重置了堆栈。因此，当您返回上一个屏幕时，由于已经安装了该屏幕，因此componentDidMount将不会触发。

您可以绑定反应导航事件侦听器，以在返回屏幕时触发一些代码。

this.focusListner = this.props.navigation.addListener("didFocus",() => {
  // Update your data
});

在卸载组件时，请不要忘记删除事件侦听器。

componentWillUnmount() {
    // remove event listener
    this.focusListner.remove();
}

Answer 2

您的componentDidMount()无法正常工作的可能原因是，屏幕B可能是模式屏幕。

对于模态而言，前一个组件不会卸载，而下一个屏幕只会打开。因此，当您返回上一个屏幕时，它不会再次安装。这就是为什么您的列表没有更新的原因。

解决方案

您必须更改应该重新渲染的组件的状态。这里，我也使用的最佳解决方案是像Redux这样的状态管理库。因此，当您从屏幕B删除项目时，只需相应地更新redux存储即可。因此，使用该reducer的每个组件都将重新呈现，并且您还可以将一击保存到您的服务器中。

Answer 3

您应该考虑在导航的didFocus事件上刷新列表。显然，如果您正在使用A-> B的堆栈导航，并且一旦从B中删除文件并返回到A，则前提是A已经在堆栈中，所以didMount在您向后导航时将不起作用。

因此，理想情况下，删除文件时，必须使用在redux中设置的某种标记来刷新导航的didFocus事件上的列表，一旦回到A，您便会读取标记的状态和相应地刷新列表。

您可以参考{{3}}来更好地了解navigation道具和生命周期事件

Answer 4

您可能想在此处查看NavigationEvents API：https://reactnavigation.org/docs/en/navigation-events.html。

要解决您的问题，您想使用导航事件onDidFocus而不是componentDidMount！

与使用命令式API相比，这是一种更简便的方法，因为它可以订阅和取消订阅侦听器。

重定向到屏幕时，componentDidMount不起作用

4 个答案: