我如何使用导航将道具传递到下一个屏幕

Question

<Navigate to={"/plans"} />;

我正在使用它导航到计划页面，但我想向它发送一些数据，任何想法我该怎么做？编程新的
    

Answer 1

Navigate

组件的

state

prop.

上方的路线状态中以路线状态使用数据。
navigate

declare function Navigate(props: NavigateProps): null;

interface NavigateProps {
  to: To;
  replace?: boolean;
  state?: State;
}

usage：

<Navigate to={"/plans"} state={{ data }} />

访问目标路由组件上的路由状态使用

useLocation挂钩访问它。

const { state } = useLocation();

...

const { data } = state;

您可以在这里阅读Https：//reaectnavigation.org/docs/params

。您可以使用导航和路线传递一些道具。

屏幕1

中的示例

Answer 2

屏幕2

function DetailsScreen({ route, navigation }) {
  const { itemId, otherParam } = route.params;
  return (
  );
}

您可以使用屏幕名称浏览

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}