react本地导航5个未定义的参数

Question

我对react native/navigation有问题。我在用

npm -> 6.14.8
node -> 14.15.0
pod -> 1.10.0
// package.json
"react": "16.13.1",
"react-native": "0.63.3",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8"

我在屏幕参数和门未定义之间通过

//Homescreen.jsconst HomeScreen=(｛navigation｝(=>{返回(<可触摸不透明度onPress=｛((=>navigation.导航("商店"，｛value:"商店"｝(}}>去商店)}

//ShopScreen.js
const ShopScreen = ({ route, navigation }) => {
// const { value } = route.params // get error
console.log(route) // get {"key": "Shop-BJc0xwbAXOUpmKPB424H0", "name": "Shop", "params": undefined}
console.log(route.params) // get undefined
console.log(route.params?.value) // get undefined
return (
<>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home', { value: 'Home' })}
/>
<ShopContainer />
</>
)
}
// rootNavigator.js
function HomeStackScreen(props) {
return (
<HomeStack.Navigator initialRouteName={'Home'}>
<HomeStack.Screen
name={'Home'}
component={HomeScreen}
options={{
headerTitle: () => <Logo />,
headerRight: () => <SideContainer />,
headerLeft: () => <SideContainer image={VIDEOCAM} />
}}
/>
</HomeStack.Navigator>
)
}
function ShopStackScreen(props) {
return (
<ShopStack.Navigator initialRouteName={'Shop'}>
<ShopStack.Screen
name={'Shop'}
component={ShopScreen}
options={{
headerTitle: () => <Logo />
}}
/>
</ShopStack.Navigator>
)
}

Answer 1

您需要使用此结构在屏幕之间传递参数。

navigation.navigate('MainNavigationName', {
screen: 'ScreenNameToNavigate',
params: { propertyKey: propertyValue },
})