React Navigation 6 试图将不同的参数传递到同一屏幕

Question

我目前有以下设置的入职堆栈组件：

export default function OnboardingStack(props) {
  const { auth, activeUser } = useContext(FirebaseContext);

  return (
    <Stack.Navigator mode="card" headerMode="none">
      <Stack.Screen
        name="Login"
        component={Login}
        option={{
          headerTransparent: true
        }}
      />
      <Stack.Screen name="App" component={AppStack} />
    </Stack.Navigator>
  );
}

然后我可以调用一个名为 MemberList 的组件，其中包含一个可触摸的不透明度：

<TouchableOpacity style={styles.touchableRow} onPress={ () => navigateMember(item) }>

方法 navigateMember 我导航到“添加成员”

 const navigateMember = (item) => {
    navigation.navigate("Add Member", {
      screen: "Member",
      params: {
        uid: item,
      }
        }
    );
  }

我每次点击这里的项目都是不同的，但是当我进入“会员”屏幕时，它保留了第一个原始传递的 uid。成员组件包含：

  useEffect(() => {
    navigation.addListener('focus', () => {
      // console.log(navigation);
      console.log('this member route');
      console.log(route);
    })

    navigation.addListener('blur', () => {
      console.log('leaving blur');
    navigation.setParams({
      key: route.key,
      params: { uid: 'og' },
    })
    })
  }, [])

每次uid都保持不变。我试图在它模糊时重置它，但它始终保留相同的参数。知道我做错了什么吗？

Answer 1

解决方案是使用推送而不是导航。

onPress={() => navigation.push('Member')}

在 documentation

中找到更多详细信息

React Navigation 6 试图将不同的参数传递到同一屏幕

React Navigation 6 attempting to pass different params to same screen

react-navigation

react-native-navigation

react-navigation-v6