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，这也是一种可能的选择。

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

1 个答案: