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

Question

我试图通过触摸主界面中选择用户的按钮，将对象类型参数从主界面传递到DailyActivity界面，但即使将当前(DailyActivity)放在另一个界面，仍然显示最后选择的用户的参数数据。但即使将当前(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

这样做

在主屏幕上。

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

在日常活动界面，取完宝宝名字后，将其设为空的状态

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。