反应导航 route.params 打字稿

Posted 2023-03-13

【中文标题】反应导航 route.params 打字稿

【英文标题】：React Navigation route.params typescript

【发布时间】：2020-11-11 00:10:39

【问题描述】：

我正在使用 TypeScript 创建一个 Expo 托管的 React Native 应用程序，但在使用 React Navigation 和 TypeScript 时遇到了一些问题。

我想在 Tab.Screen 组件上指定底部选项卡导航器的图标。

此代码有效，但由于 route.params 可能未定义（第 10 行）而报错。

“对象”类型上不存在属性“图标”

我可以在 initialParams 上制作所需的图标道具吗？

我查看了文档没有任何运气。

const App: React.FC<> = () => 
  return (
    <SafeAreaView style=styles.container>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions=( route ) => (
            tabBarIcon: ( size, color ) => (
              <MaterialIcons
                size=size
/* ===> */      name=route.params.icon
                color=color
              />
            ),
          )
        >
          <Tab.Screen
            name="EventListView"
            initialParams= icon: 'view-agenda' 
            component=EventListScreen
          />
          <Tab.Screen
            name="CreateEvent"
            initialParams= icon: 'public' 
            component=SettingsScreen
          />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  )

【参考方案1】：

import RouteProp from '@react-navigation/native';

  route: RouteProp< params:  icon: ICON_TYPE  , 'params'>

我最近遇到了同样的问题，我想出了这个，它似乎工作正常。

【参考方案2】：

这样做的正确方法是使用参数定义一个类型，并在创建导航器时将其作为类型参数发送。像这样的：

type TabNavigatorParamList = 
  EventListView:  icon: string 
  CreateEvent:  icon: string 


const Tab = createBottomTabNavigator<TabNavigatorParamList>(); //*

* 我假设您的 Tab 组件是 BottomTabNavigator，但无论您使用哪种 createwhateverNavigator，相同的代码都可以工作。

就像您的 Tab.Navigator 和 Tab.Screen 将为其 route 属性设置正确的类型。

还有更多信息 in the docs，以及更高级的情况，例如注释钩子和嵌套导航器。

【参考方案3】：

我认为您可以使用以下语法：

name=route.params?.icon

否则使用这个：

name=route.params?.icon ?? 'defaultName'

根据文档，此语法可防止在某些情况下未定义参数，并在 params.someParam 未定义或为空时提供默认值。

欲了解更多信息，请阅读此处：https://reactnavigation.org/docs/upgrading-from-4.x/#no-more-getparam。

【讨论】：

感谢您的回答。我只是觉得这是围绕 TypeScript 工作的。我是一个完美的世界，我永远不应该被定义，但我想它可以完成这项工作。

这只是可选的链接。如果您希望您的编辑在您打字时给出建议，那么 Robert 的上述回答是首选。