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

Question

我是React Native的新手.如何通过调用返回到它之前刷新/重新加载以前的屏幕goBack()？

可以说我们有3个屏幕A,B,C:

A -> B -> C

当我们goBack()从屏幕C 运行时,它返回到屏幕B但是具有旧的状态/数据.我们怎样刷新它？第二次没有调用构造函数.

Answer 1

如何使用 useIsFocused 钩子？

https://reactnavigation.org/docs/function-after-focusing-screen/#re-rendering-screen-with-the-useisfocused-hook

const componentB = (props) => { 
  // check if screen is focused
  const isFocused = useIsFocused();

  // listen for isFocused, if useFocused changes 
  // call the function that you use to mount the component.

  useEffect(() => {
    updateSomeFunction()
  },[isFocused]);
}

Answer 2

在callBack中添加Api调用可以解决问题

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

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

Answer 3

对于 react-navigation 5.x 使用

5.x

用

componentDidMount() {
  this.loadData();

  this.focusListener = this.props.navigation.addListener('focus', () => {
    this.loadData();
    //Put your Data loading function here instead of my this.loadData()
  });
}

对于功能组件

function Home({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      loadData();
      //Put your Data loading function here instead of my loadData()
    });

    return unsubscribe;
  }, [navigation]);

  return <HomeContent />;
}

Answer 4

在你的屏幕上 B 构造函数会像魔术一样工作:)

    this.props.navigation.addListener(
          'didFocus',
          payload => {
            this.setState({is_updated:true});
          }
    );

Answer 5

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

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

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

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

Answer 6

React-Navigation附带的内置侦听器功能将是最简单的解决方案。每当通过向后导航将某个组件再次“聚焦”到该组件时，侦听器就会触发。通过编写一个loadData函数，该函数在加载组件时和通知侦听器时均可以调用，您可以在向后导航时轻松地重新加载数据。

   componentWillMount(){
    this._subscribe = this.props.navigation.addListener('didFocus', () => {
     this.LoadData();
     //Put your Data loading function here instead of my this.LoadData()
    });}

Answer 7

简单的！将函数插入到里面useFocusEffect(func)

import { useFocusEffect } from '@react-navigation/native'