gpt4 book ai didi

javascript - 如何使用带有 expo 的 React-Navigation 正确键入作为 Prop 传递的导航

转载 作者:行者123 更新时间:2023-12-02 16:01:18 33 4
gpt4 key购买 nike

如何正确键入作为 props 传递给另一个组件的导航?根据文档

您应用中的每个屏幕组件都会自动提供导航属性。

还有,

为了类型检查我们的屏幕,我们需要注释屏幕接收到的导航属性和路由属性。

type Props = NativeStackScreenProps<RootStackParamList, 'Profile'>;

我有一个带有路由器的导航组件:

const App: React.FC = () => {
const [userMetrics, setUserMetrics] = useState<UserMetrics>(null);
const Stack = createNativeStackNavigator<RootStackParamList>();
return (
<UserMetricsContext.Provider value={{ userMetrics, setUserMetrics }}>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Tests" component={Tests} />
</Stack.Navigator>
</NavigationContainer>
</UserMetricsContext.Provider>
);
};

在主屏幕中,我想接收导航 Prop 以将其进一步向下传递到表单,该表单有一个按钮,该按钮将导航到测试组件并将表单数据作为参数传递:

interface Props {
navigation: NativeStackScreenProps<RootStackParamList, "Home">;
}

export const Home: React.FC<Props> = ({ navigation }) => {
const { setUserMetrics } =
useContext<IUserMetricsContextType>(UserMetricsContext);
return (
<View style={styles.container}>
<StatusBar style="auto" />
<HealthCheckForm onSubmit={setUserMetrics} navigation={navigation} />
</View>
);
};

现在问题开始在表单组件中可见,因为 typescript 假设了一个级别太多,我已经像在父 Home 组件中那样输入了 Prop :

interface Props {
onSubmit: React.Dispatch<React.SetStateAction<UserMetrics>>;
navigation: NativeStackScreenProps<RootStackParamList, "Home">;
}

typescript 要我这样使用它:

  const submitHandler = (data: UserMetrics) => {
onSubmit(data);
navigation.navigation.navigate("Tests", { userMetrics: data });
console.log(data);
};

但是这不起作用,正确的 - 工作和导航用法是

navigation.navigate("Tests", { userMetrics: data });

当我导航到测试组件并传递参数时,我不知道如何在测试组件中接收它们。我正在尝试类比地这样做:

interface Props {
navigation: NativeStackScreenProps<RootStackParamList, "Tests">;
}

export const Tests: React.FC<Props> = ({ navigation }) => {
const { userMetrics } =
useContext<IUserMetricsContextType>(UserMetricsContext);
console.log({ params: navigation.route.params });
return (
<View>
<DisplayList />
</View>
);
};

我又遇到了另一个有关读取未定义属性的错误。谢谢

最佳答案

有嵌套导航器的解决方案(起点在这里:https://reactnavigation.org/docs/nesting-navigators/)。但是,在这种情况下,我建议不要让您的 HealthCheckForm 了解导航状态。只需向其传递一个标准的 onSubmit() 属性并处理 Home 组件内的所有导航。

还有一个提示,请确保正确设置您的 RootStackParamList,以便“测试”路由期待 {userMetrics: YourDataType}。这是一个随机的设置示例。

export type RootStackParamList = {
myRouteName: undefined;
tests: { userMetrics: MyDataType }; // TS now expects MyDataType on the props for tests route
terminalAndMate: {
departingTerminal: WSFTerminal;
arrivingTerminal: WSFTerminal;
};
...

我还建议以这种方式输入您的屏幕 Prop ,而不是作为界面。 NativeStackScreenProps 可以携带在 rootStackParamList 上定义的参数:

type TestsScreenProps = NativeStackScreenProps<RootStackParamList, "tests">;

通过这两项更改,tests 屏幕应该有 props.route.params,它将包含 MyDataType。

尝试:https://reactnavigation.org/docs/5.x/typescript/

-关于Seven评论的补充-

查看 NativeStackScreenProps 的类型声明。

export declare type NativeStackScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = string> = {
navigation: NativeStackNavigationProp<ParamList, RouteName>;
route: RouteProp<ParamList, RouteName>;
};

通过像您那样制作界面,您说的是该组件的 props 类型是

{ navigation: { navigation: NativeStackNavigation..etc , route: RouteProp }}

您可以看到它是双重嵌套的,并且不是必需的,因为库提供的类型支持您需要的所有功能。

提交您的 onSubmit 函数看起来像这样:

//home.tsx
const onSubmit = (data: YourDataType) => {
props.navigation.navigate("tests", { userMetrics: data});
}

return (
//...stuff
<YourFormComponent onSubmit={onSubmit} />

通过这种方式,您的所有导航都由 home 处理,这与测试处于同一“级别”,并且您可以使导航更加简洁。

应该不需要任何 useEffect 调用。

关于javascript - 如何使用带有 expo 的 React-Navigation 正确键入作为 Prop 传递的导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70606643/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com