Question

我正在使用TypeScript创建一个由Expo管理的React Native应用，并且在React Navigation和TypeScript上遇到了一些问题。

我想在Tab.Screen组件上为“底部标签导航器”指定图标。

此代码有效，但会抱怨，因为route.params可能未定义（第10行）。

类型“ object”上不存在属性“ icon”

我可以制作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>
  )
}

Answer 1

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

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

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

Answer 2

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

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

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

* 我假设您的 Tab 组件是一个BottomTabNavigator，但是无论您使用哪种create{whatever}Navigator，相同的代码都可以工作。

就像这样，您的 Tab.Navigator 和 Tab.Screen 将拥有正确的 route 属性类型。

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

Answer 3

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

name={route.params?.icon}

否则使用此：

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

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

有关更多信息，请阅读：https://reactnavigation.org/docs/upgrading-from-4.x/#no-more-getparam。

反应导航route.params打字稿

3 个答案: