在 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,

然后返回

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

或者情况是：

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

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

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

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

Answer 1

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

鉴于您使用的是 React Navigation v5 钩子 useFocusEffect 与运行在屏幕聚焦时调用一个函数的目的相同，这也包括导航回屏幕。

来自文档

Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc. While this can be achieved using focus and blur events, it's not very ergonomic.

代码应该是这样的

  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，这也是一个可能的替代方案。

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

Reload previous screen in React Native

navigation

reload

react-native