在 React Native 中重新加载上一个屏幕

Question

我一直用这种方式在从当前屏幕触发按钮时刷新上一个屏幕。

屏幕 A

constructor(props){
  ...
  this.handleOnNavigateBack = this.handleOnNavigateBack.bind(this);
}

handleOnNavigateBack = (foo) => {
  this.setState({ foo })
}

goToScreenB(){
  this.props.navigation.navigate('ScreenB', {
    onNavigateBack: this.handleOnNavigateBack
  })
}

屏幕 B

goBackToScreenA(){
  this.props.navigation.state.params.onNavigateBack(this.state.foo)
  this.props.navigation.goBack()
}

我需要先将函数保留在参数中，以便在从屏幕b返回时触发它。但是如果是从 1 个屏幕到 1 个屏幕，这是可以使用的。如果我有一个多层屏幕被导航，例如

从屏幕 A -> 屏幕 B -> 屏幕 C，

然后返回

从屏幕C -> 屏幕B -> 屏幕A然后在屏幕A重新加载功能，会很麻烦。

或者情况可能是：

从 屏幕 A -> 屏幕 B，然后从 屏幕 B 替换屏幕 C，然后从 屏幕 C -> 屏幕 A 然后仅在屏幕 A 重新加载函数。

通过这样做，我必须在每次导航发生时继续传递函数以重新加载。所以我想知道是否有一种方法可以捕获输入的屏幕并触发您想要的特定功能，就像 Ionic 所做的那样。

在 Ionic 案例中，有一个名为 ionViewWillEnter 的事件，它有助于执行此重新加载操作，而无需完成函数注册等操作。您只需调用该函数即可。

我一直在尝试在 React Native 中找到一种与此类似的方法，但我无法解决它。我听说过 redux 但从未实现它，因为我仍然无法理解它是如何工作的，所以我尽量不要先使用它。

Answer 1

根据您的问题，您正在寻找类似于“ionViewWillEnter”的东西，只要屏幕被聚焦，它就会运行回调。

鉴于您使用的是 React Navigation v5 挂钩 useFocusEffect 的作用与在屏幕获得焦点时运行函数的目的相同，这也包括导航回屏幕。

来自文档

有时我们希望在屏幕聚焦时运行副作用。在旁边 效果可能涉及添加事件侦听器、获取 数据，更新文档标题等。虽然这可以使用 聚焦和模糊事件，它不是很符合人体工程学。

代码是这样的

  useFocusEffect(
    React.useCallback(() => {
      alert('Screen focused')
      // Do something when the screen is focused
      return () => {
        alert('Screen was unfocused');
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

您可以在此处找到文档 https://reactnavigation.org/docs/use-focus-effect/

如果您的要求是通过从屏幕 B 或 C 传递某些内容来更新数据，您可以考虑使用易于使用的 Context，或者如果您计划使用 redux，这也是一种可能的替代方案。