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

Question

我有 componentDidMount 在屏幕 A 中列出一组文件（图像），从这个屏幕 A 我有另一个屏幕 B link 我可以在其中查看文件的详细视图和我可以选择删除文档。

使用

调用屏幕 A 时

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

componentDidMount 工作正常，但是当我在 unlink 回调中删除文件（我正在使用 react-native-fs）时，我将导航称为

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

重定向到屏幕 A 时工作正常，但 componentDidMount 不工作，这意味着我仍然可以在列表中看到已删除的文件。即屏幕A不刷新，请问有什么解决办法吗？

Answer 1

Possible reason, why your componentDidMount() is not working, is because screen B may be possible a modal.

在模态框的情况下，前一个组件不会卸载，下一个屏幕只会在它上面打开。因此，当您返回上一屏幕时，它不会再次挂载。这就是您的列表没有更新的原因。

Solution

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

Answer 2

在 react-navigation 中，如果您导航到其他屏幕，组件将不会卸载，除非您在堆栈导航中重置堆栈。所以当你回到上一个屏幕时，因为它已经安装，componentDidMount 将不会触发。

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

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

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

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

Answer 3

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

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

您可以参考 this 以更好地理解 navigation 道具和生命周期事件

Answer 4

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

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

这是一种比使用命令式 API 更简单的方法，因为它负责订阅和取消订阅听众。

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

componentDidMount is not working when redirect to a screen

react-native

react-navigation

react-lifecycle