javascript - 如何在 React Native 中监听导航状态参数的变化？

Question

我正在使用 React Native 开发一个移动应用程序。在那里，我在导航到第二页时传递了一些东西。

所以，假设我的第一个屏幕有这样的东西。

export default function firstScreen(props) {
  return(
    //data is a custom object variable that may be changed.
    <Button onPress={() => props.navigation.navigate('SecondScreen', { data: data } )} /> 
  )
}

在我的第二个屏幕上，假设有这样的东西......

export default function secondScreen(props) {
  const { data } = props.navigation.state.params;

  useEffect(() => {
    console.log(data);
  }, [data])


  return(
    //content
  )
}

我的问题是，当 data从第一个屏幕更改，第二个屏幕不听该更改并打印 data的内容控制台上的变量。

所以，我想知道，如何在 React Native 中监听导航状态的变化。

Answer 1

以下是我使用 解决此问题的方法 Hook 在 React 导航 V5:

import { useRoute } from '@react-navigation/native';
const route = useRoute();
useEffect(() => { //This will run whenever params change
     const {params = {}} = route;
    //your logic here
}, [route]);