反应原生导航 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.js 常量 HomeScreen = ({ 导航 }) => { 返回（ { navigation.navigate('Shop', { value: 'Shop' }) }}> 去商店 )}

//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 },
      })