Question

无法使用 react-navigation 5x 发送任何参数。尝试了文档上的所有内容。不知道怎么回事。

我会和你分享我所有的路线结构。

我的 ApplicationNavigator.js：我同时使用带有标签栏导航器的抽屉内容。 OrderNavigator 是一个 tabnavigator，Dashboard 是一个 stacknavigator。

const ApplicationNavigator = () => {
  const [isApplicationLoaded, setIsApplicationLoaded] = useState(false)
  const applicationIsLoading = useSelector((state) => state.startup.loading)

 return (
    <Drawer.Navigator
      drawerStyle={{ width: '100%' }}
      drawerContent={(props) => <DrawerContent {...props} />}
    >
      <Drawer.Screen name="Dashboard" component={DashboardNavigator} />
      <Drawer.Screen name="Order" component={OrderNavigator} />
    </Drawer.Navigator>
  )
}

export default ApplicationNavigator

我的 OrderNavigator.js：这是我的 tab.screen 结构。

const ScreenA = () => {
  return (
    .....
    <Stack.Navigator>
      <Stack.Screen
        options={headerStyle_1}
        name="Orders"
        component={IndexOrderContainer}
      />
    </Stack.Navigator>
  )
}

const ScreenB = () => {
  ....
  return (
    <Stack.Navigator>
      <Stack.Screen
        options={headerStyle_1}
        name="New Order"
        component={AddOrderContainer}
      />
    </Stack.Navigator>
  )
}

const OrderNavigator = () => {
  return (
    <Tab.Navigator headerMode={'none'}>
      <Tab.Screen name="OrderList" component={ScreenA} />
      <Tab.Screen name="NewOrder" component={ScreenB} />
    </Tab.Navigator>
  )
}

export default OrderNavigator

我正在尝试使用下面的代码进行重定向。我将它与我的订单列表页面一起使用，并尝试重定向到“订单详细信息”页面 onclick。（带标签导航器。）

  <TouchableOpacity
    onPress={() =>
      navigation.navigate('NewOrder', {
        params: { user: 'jane' },
      })
    }
    style={[styles.ListItem]}
    button
    key={`order${index}`}
  >

我的回答是，当尝试使用参数导航时。但是你可以看到我的参数在响应中是“未定义的”。

const AddOrderContainer = ({ route, navigation }) => {
  useEffect(() => {
    console.log(route)
  }, [route])
....
....
Object {
  "key": "New Order-mafygLVPzFO1rVOhj1zVH",
  "name": "New Order",
  "params": undefined,
}

无法通过 React Navigation TabBar 传递参数

0 个答案: