2

我必须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不刷新，有什么可能的解决办法吗？

4

4 回答 4

7

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

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

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

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

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

于 2018-11-28T18:08:21.063 回答
1

可能的原因，为什么你componentDidMount()不工作，是因为屏幕 B 可能是一个模式。

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

解决方案

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

于 2018-11-28T18:06:28.980 回答
0

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

因此，理想情况下，您必须didFocus在删除文件时使用 redux 中设置的某种标志刷新您的列表，当您返回 A 时，您读取标志的状态并相应地刷新您的列表。

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

于 2018-11-28T18:08:29.900 回答
0

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

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

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

于 2018-11-28T23:43:56.707 回答