React Native 导航无法动态生成带有导航的页面

Question

我正在尝试生成具有导航功能的页面，如下所示：

type Props = NativeStackScreenProps<RootStackParamList, "Practice">;

const ScrollView = ({ navigation, route }: Props) => {
  const translateX = useSharedValue(0);
  const scrollHandler = useAnimatedScrollHandler((event) => {
    translateX.value = event.contentOffset.x;
  });
  return (
    <>
      <Animated.ScrollView
        onScroll={scrollHandler}
        scrollEventThrottle={16}
        horizontal
        style={styles.scrollContainer}
      >
        {routes.map((item, index) => {
          return (
            <Page
              key={item.route}
              item={item}
              index={index}
              translateX={translateX}
              navigation={navigation}
              route={route}
            />
          );
        })}
      </Animated.ScrollView>
    </>
  );
};

RootStackParamList 定义为：

export type RootStackParamList = {
  Home: undefined;
  ReactQuiz: undefined;
  LinuxQuiz: undefined;
  Practice: undefined;
  MongoDBQuiz: undefined;
};

我尝试使用项目对象中传递的路线在每个页面组件中导航：

const routes = [
  {
    route: "LinuxQuiz",
    bgColor: "black",
    fontColor: "yellow",
  },
  {
    route: "ReactQuiz",
    bgColor: "#88dded",
    fontColor: "#1c2c4c",
  },
  {
    route: "MongoDBQuiz",
    bgColor: "#3FA037",
    fontColor: "#4DB33D",
  },
];

这是页面组件：

interface PageProps
  extends NativeStackScreenProps<RootStackParamList, "Practice"> {
  item: {
    route: string;
    bgColor: string;
    fontColor: string;
  };
  index: number;
  translateX: Animated.SharedValue<number>;
}

const Page: React.FC<PageProps> = ({ item, index, translateX, navigation, route }) => {

  return (
    <View>
        <RectangleButton
        onPress={() => navigation.navigate(item.route)}
        >
          {item.route}
        </RectangleButton>
      </View
  );
};

export default Page;

但是它不允许我使用路线属性进行导航，并且我收到错误：

No overload matches this call.
  Argument of type '[string]' is not assignable to parameter of type '[screen: "Practice"] | [screen: "Practice", params: undefined] | [screen: "Home"] | [screen: "Home", params: undefined] | [screen: "ReactQuiz"] | [screen: "ReactQuiz", params: undefined] | [screen: "LinuxQuiz"] | [screen: "LinuxQuiz", params: undefined] | [screen: "MongoDBQuiz"] | [screen: ...]'.
  Overload 2 of 2, '(options: { key: string; params?: undefined; merge?: boolean | undefined; } | { name: "Practice"; key?: string | undefined; params: undefined; merge?: boolean | undefined; } | { key: string; params?: undefined; merge?: boolean | undefined; } | ... 6 more ... | { ...; }): void', gave the following error.
    Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: "Practice"; key?: string | undefined; params: undefined; merge?: boolean | undefined; } | { key: string; params?: undefined; merge?: boolean | undefined; } | ... 6 more ... | { ...; }'.ts(2769)
No overload matches this call.
  Argument of type '[string]' is not assignable to parameter of type '[screen: "Practice"] | [screen: "Practice", params: undefined] | [screen: "Home"] | [screen: "Home", params: undefined] | [screen: "ReactQuiz"] | [screen: "ReactQuiz", params: undefined] | [screen: "LinuxQuiz"] | [screen: "LinuxQuiz", params: undefined] | [screen: "MongoDBQuiz"] | [screen: ...]'.
    Type '[string]' is not assignable to type '[screen: "Practice"] | [screen: "Home"] | [screen: "ReactQuiz"] | [screen: "LinuxQuiz"] | [screen: "MongoDBQuiz"]'.
      Type '[string]' is not assignable to type '[screen: "MongoDBQuiz"]'.
        Type 'string' is not assignable to type '"MongoDBQuiz"'.
  Overload 2 of 2, '(options: { key: string; params?: undefined; merge?: boolean | undefined; } | { name: "Practice"; key?: string | undefined; params: undefined; merge?: boolean | undefined; } | { key: string; params?: undefined; merge?: boolean | undefined; } | ... 6 more ... | { ...; }): void', gave the following error.
    Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: "Practice"; key?: string | undefined; params: undefined; merge?: boolean | undefined; } | { key: string; params?: undefined; merge?: boolean | undefined; } | ... 6 more ... | { ...; }'.ts(2769)

Answer 1

Typescript 无法理解字符串“MongoDBQuiz”和类型

RootStackParamList.MongoDBQuiz

之间的区别。将路线更改为

const routes = [
  {
    route: RootStackParamList.LinuxQuiz,
    bgColor: "black",
    fontColor: "yellow",
  },
  {
    route: RootStackParamList.ReactQuiz,
    bgColor: "#88dded",
    fontColor: "#1c2c4c",
  },
  {
    route: RootStackParamList.MongoDBQuiz,
    bgColor: "#3FA037",
    fontColor: "#4DB33D",
  },
];

并将 PageProps 中的类型更改为

RootStackParamList