[英]How to properly type navigation passed as props with React-Navigation with expo
如何正确键入作为道具传递给另一个组件的导航? 根据文档
应用程序中的每个屏幕组件都会自动提供导航道具。
并且,
要对屏幕进行类型检查,我们需要对屏幕接收到的导航道具和路线道具进行注释。
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>
);
};
在主屏幕中,我想接收导航道具以将其进一步传递给表单,该表单有一个按钮,该按钮将导航到测试组件并将表单数据作为参数传递:
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 组件中那样输入了道具,如下所示:
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 });
当我导航到 Tests 组件并传递参数时,我不知道如何在 Test 组件中接收它们。 我试图像这样类比地做到这一点:
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
了解导航 state。 只需将标准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;
};
...
我还建议以这种方式输入屏幕道具,而不是作为界面。 NativeStackScreenProps 可以携带 rootStackParamList 中定义的参数:
type TestsScreenProps = NativeStackScreenProps<RootStackParamList, "tests">;
通过这两个更改, tests
屏幕应该有props.route.params
,其中将包含 MyDataType。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.