React Navigation 6 试图将不同的参数传递到同一屏幕
React Navigation 6 attempting to pass different params to same screen
我目前有以下设置的入职堆栈组件:
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都保持不变。我试图在它模糊时重置它,但它始终保留相同的参数。知道我做错了什么吗?
解决方案是使用推送而不是导航。
onPress={() => navigation.push('Member')}
中找到更多详细信息
我目前有以下设置的入职堆栈组件:
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都保持不变。我试图在它模糊时重置它,但它始终保留相同的参数。知道我做错了什么吗?
解决方案是使用推送而不是导航。
onPress={() => navigation.push('Member')}
中找到更多详细信息