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

Question

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

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

还有，

要类型检查我们的屏幕，我们需要注释屏幕接收到的导航道具和路线道具。

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">;
}

打字稿要我这样使用它：

  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>
  );
};

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

Answer 1

嵌套导航器有解决方案（起点：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;
    };
...

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

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

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

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

-关于小七的评论补充-

看一下 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} />

这样您的所有导航都由主页处理，它与测试在同一 'level' 上，并且您可以使导航更加简洁。

不需要任何 useEffect 调用。

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

How to properly type navigation passed as props with React-Navigation with expo

javascript

typescript

reactjs

react-native

react-navigation