在 goBack() 上刷新上一个屏幕

Question

我是 React Native 的新手。通过调用 goBack() 返回时，我们如何刷新/重新加载上一个屏幕？

假设我们有 3 个屏幕 A、B、C：

 A -> B -> C

当我们从屏幕 C 运行 goBack() 时，它会返回屏幕 B，但状态/数据是旧的。我们如何刷新它？构造函数不会被第二次调用。

原文由 Adnan Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，构造函数只被第一次调用，你不能调用它两次。

首先：但是您可以将数据 getter/setter 与构造函数分开并将其放入一个函数中，这样您就可以将函数传递给下一个场景，并且无论何时返回，您都可以简单地调用该函数。

更好：您可以在您的第一个场景中创建一个返回功能，该功能还可以在返回时更新场景并将返回功能向下传递。这样第二个场景就不会知道你的更新功能是合理的。

最佳：您可以在第二个场景中使用 redux 并调度返回操作。然后在你的减速器中，你负责返回并刷新你的场景。

原文由 Bat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在您要返回的屏幕中的焦点回调中添加 Api 调用可以解决问题。

 componentDidMount() {
    this.props.fetchData();
    this.willFocusSubscription = this.props.navigation.addListener(
      'willFocus',
      () => {
        this.props.fetchData();
      }
    );
  }

  componentWillUnmount() {
    this.willFocusSubscription.remove();
  }

2021 年更新：

   componentDidMount() {
    this.props.fetchData();
    this.willFocusSubscription = this.props.navigation.addListener(
      'willFocus',
      () => {
        this.props.fetchData();
      }
    );
  }

  componentWillUnmount() {
    this.willFocusSubscription();
  }

如果你使用 React Hook：

   React.useEffect(() => {
      fetchData();
      const willFocusSubscription = props.navigation.addListener('focus', () => {
        fetchData();
    });

    return willFocusSubscription;
}, []);

原文由 Mukundhan 发布，翻译遵循 CC BY-SA 4.0 许可协议