React Native - RN - 使用 TypeScript 进行导航并传递参数

我正在尝试为一个使用 TypeScript 的应用创建一个最小可用示例，其中包含常见的导航用法。只是为了将其作为未来项目的参考。老实说，我在理解 TypeScript 的导航文档时有些吃力，所以这里有点即兴发挥。基本想法是创建一个结构，其中有些屏幕不需要导航参数即可导航，有些其他屏幕则需要传递 1 或 2 个导航参数。

App.tsx 一些界面不需要参数，一些界面需要 1 个或 2 个参数。

 export type RootStackParamList = {
      Dashboard: undefined;
      Miscs: { miscsParam: string };
      CounterTypeRedux: undefined;
      ReanimatedScreens: undefined;
      Profile: {
        profileParam: string;
        userId: string;
      };
    };
    
    
    const App = () => {
      const Stack = createNativeStackNavigator<RootStackParamList>();
    
      return (
        <Provider store={store}>
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="Dashboard" component={Dashboard} />
              <Stack.Screen name="Miscs" component={Miscs} />
              <Stack.Screen name="CounterTypeRedux" component={CounterTypeRedux} />
              <Stack.Screen
                name="ReanimatedScreens"
                component={ReanimatedScreens}
              />
              <Stack.Screen name="Profile" component={Profile} />
            </Stack.Navigator>
          </NavigationContainer>
        </Provider>
      );
    };

Dashboard.tsx 在这里，我有多个用于导航到特定屏幕的“Tile”组件。同样，这是一些情况下没有传递导航参数，有些情况下传递了导航参数。参数的数量故意拼写错误，并且参数对象的结构不正确（与 App.tsx 中定义的相比）。

const Dashboard: React.FC = () => {
  return (
    <View style={styles.container}>
      <Text>Dashboard with links to particular screens</Text>
      <Tile copy="Counter" target="CounterTypeRedux" />
      <Tile copy="Reanimated" target="ReanimatedScreens" />
      <Tile
        copy="Miscellaneous"
        target="Miscs"
        navigationParams={{ wrongParam: 29, bc: 32 }}
      />
      <Tile
        copy="Profile"
        target="Profile"
        navigationParams={{ misspelledParam: 23 }}
      />
    </View>
  );
};

Tile.tsx 这是一个 tile 组件，它接收三个属性：copy、导航的目标屏幕以及可选的 navigationParam，用于需要传递参数的屏幕。

import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../../App';

type Props = {
  target: keyof RootStackParamList;
  copy: string;
  navigationParams?: {};
};

type genericScreenProp = NativeStackNavigationProp<
  RootStackParamList,
  Props['target']
>;

const Tile: React.FC<Props> = ({ target, copy, navigationParams }) => {
  const navigation = useNavigation<genericScreenProp>();

  return (
    <View>
      <TouchableOpacity
        onPress={() => navigation.navigate(target, navigationParams)}>
        <Text>{copy}</Text>
      </TouchableOpacity>
    </View>
  );
};

Profile.tsx

访问路由中传递的参数：

import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../../App';

type Props = {
  route: profileScreenProps;
};

type profileScreenProps = NativeStackNavigationProp<
  RootStackParamList,
  'Profile'
>;

const Profile: React.FC<Props> = ({ route }) => {
    const myParam = route.params?.misspelledParam;


  return (
    <View>
      <Text>This is the profile screen</Text>
    </View>
  );
};

在实际导航到屏幕方面一切正常，但有几个问题：

1. 当我在 Tile 组件中将参数作为 navigationParams 传递错误时，没有任何提示显示错误（表示它们与 App.tsx 中为该特定屏幕定义的不匹配；

2. 当我在个人资料屏幕中使用 console.log(route) 时，返回的对象是：

   {"key": "Profile-b796IX16Vm4shxrSu6lF0", "name": "Profile", "params": {"misspelledParam": 23}, "path": 未定义}

路径应该未定义吗？

3. 在个人资料屏幕上:

   const myParam=route.params?.profileParam;

params 部分会被以下内容高亮显示：

TS2339: Property 'params' does not exist on type 'profileScreenProps'.

4. 在 Tile 组件中，以下内容被标记为错误：

   

它仅指 navigationParams。如果我移除它，只保留 target，则不会显示任何错误。

如你所见，我对这里的类型检查有点困惑，所以如果上述代码还有其他问题，我也不会感到惊讶。