通过 React Navigation 离开当前屏幕时传递参数并重置它

Question

我尝试通过触摸在主屏幕中选择用户覆盖的按钮，将对象类型参数从主屏幕传递到 DailyActivity 屏幕。但即使将 current(DailyActivity) 留到另一个屏幕，仍会显示最后选择的用户的参数数据。

所以让我知道这些事情..

1. 如何在移动到另一个屏幕时重置参数？

2. 如何在子屏幕组件中检测当前屏幕名称？

主屏幕

<Button
          buttonStyle={{ margin: 5, backgroundColor: "#ef9a9a" }}
          title="Daily Activity"
          onPress={() => {
            navigation.navigate("Daily Activity", { baby });
            setIsOverlayed(!isOverlayed);
          }}
        />

每日活动屏幕

export default function DailyActivity({ route }) {
  if ({ route }) {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Daily Activity Screen</Text>
        <Text>{route.params.baby.firstName}</Text>
      </View>
    );
  } else {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Daily Activity Screen</Text>
        <Text>params not exist</Text>
      </View>
    );
  }
}

Answer 1

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

 useFocusEffect(
      React.useCallback(() => {
        // Do something when the screen is focused

        return () => {
          // Do something when the screen is unfocused
          navigation.setParams({ contactId: null }) // reset parametr that you need
        };
      }, [setParams]),
    );
    

Answer 2

这样做

在主屏幕中：

navigation.navigate("Daily Activity", { baby:baby });
setIsOverlayed(!isOverlayed);

在日常活动屏幕中，在获取婴儿姓名后将其设为 null

navigation.setParams({baby: null});

如果你使用钩子，那么调用这个方法

import {useIsFocused} from '@react-navigation/native';

const isFocused = useIsFocused();
export default function DailyActivity {
   useEffect(() => {
     !isFocused && resetNavigationMethod();
 }, [isFocused]);

  ... your codes
}

useIsFocused 用于每当您尝试更改屏幕时，都会触发此功能。如果您要返回，则 isFocused 将返回 false。