当 Stack Screens/Stack 屏幕名称在运行时生成时，如何键入检查 React Navigator 的 Stack Navigation 路由？

Question

我目前正在为应用程序使用 React Navigation，我对 TS 比较陌生，因此需要一些关于如何执行此操作的建议。

我的问题是我正在复制 React Navigations 建议的导航器类型检查，但我不确定如何为从对象数组动态生成的堆栈屏幕添加映射。

React Navigation 文档建议我们这样做...

type ShopParamsList = {
  Shop: Array<NavigationItem>;
}; 

const Stack = createStackNavigator<ShopParamsList>();

这对我的第一个堆栈屏幕来说很好，看起来像这样

   <Stack.Screen
       name='Shop'
       component={CategoryPage}
       ...
       />

然而，其他屏幕是从数据数组生成的，我们正在从数组中的数据设置组件的名称，就像这样...

   {categoryNavigation.map((item: NavigationItem, key) => {
          if (item.Data.Url !== null) {
            return (
              <Stack.Screen
                key={key}
                name={item.Data.Url}   //here
                }}
                component={CategoryPage}
                ...
              />
})

因此，我不确定如何输入检查屏幕，因为它们是动态生成的

   type ShopParamsList = {
      Shop: Array<NavigationItem>;
      //Other Screens: Other Screen Params
   };

那么如何将正确的映射传递到这些屏幕的此对象类型中呢？谢谢！

Answer 1

你不能。 TypeScript 是一个静态类型检查器，它不能对动态数据进行类型检查。除非您事先知道所有名称，否则无法对这段代码进行类型检查。

但是，您可能不应该动态创建所有这些屏幕，因为它们基本上是具有不同数据的相同屏幕，您应该改为使用单个屏幕：

<Stack.Screen
  name='Category'
  component={CategoryPage}
  getId={({ params }) => params.item.Data.Url}
/>

然后，在导航时，您应该在参数中传递该数据：

navigation.navigate('Category', { item })

那么你可以为这个屏幕定义一个类型：

Category: { item: NavigationItem };

当 Stack Screens/Stack 屏幕名称在运行时生成时，如何键入检查 React Navigator 的 Stack Navigation 路由？

How do I type check React Navigator's Stack Navigation routes when the Stack Screens/Stack Screen name are generated at runtime?

typescript

reactjs

react-native

react-navigation