React Navigation route.params typescript

Я создаю приложение React Native, управляемое Expo, с помощью TypeScript и имею некоторые проблемы с React Navigation и TypeScript.

Я хочу указать значок для навигатора нижней вкладки в компоненте Tab.Screen.

Этот код работает, но жалуется, потому что route.params может быть неопределенным (строка 10).

Свойство 'icon' не существует для типа 'object'

Могу ли я сделать опору значка обязательной для 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>
  )
}

react-native reactjs typescript react-navigation react-navigation-bottom-tab
person Dainel vdM    schedule 21.07.2020    source источник

Ответы (3)


arrow_upward
8
arrow_downward

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

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

У меня недавно была такая же проблема, я придумал это, похоже, все работает нормально.

person Robert Sidzinka    schedule 21.07.2020

arrow_upward
1
arrow_downward

Правильный способ сделать это - определить тип с параметрами и отправить его в качестве аргумента типа при создании навигатора. Что-то вроде этого:

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

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

* Я предполагал, что ваш компонент Tab был BottomTabNavigator, но тот же код будет работать независимо от того, какой create{whatever}Navigator вы используете.

Точно так же ваши Tab.Navigator и Tab.Screen будут иметь правильный тип для их route опоры.

Дополнительная информация содержится в документации, а также более сложные ситуации, такие как аннотирование хуков и вложенные навигаторы. .

person Daniel Reina    schedule 21.01.2021

arrow_upward
0
arrow_downward

Я думаю, вы можете просто использовать этот синтаксис:

name={route.params?.icon}

В противном случае используйте это:

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

Согласно документации, этот синтаксис защищает от неопределенных параметров в некоторых случаях и предоставляет значение по умолчанию, если params.someParam имеет значение undefined или null.

Дополнительную информацию см. Здесь: https://reactnavigation.org/docs/upgrading-from-4.x/#no-more-getparam.

person Bas van der Linden    schedule 21.07.2020
comment
Спасибо за ваш ответ. Я просто чувствую, что это работает с TypeScript. Я идеальный мир, я никогда не должен быть неопределенным, но я думаю, он делает свою работу. - person Dainel vdM; 21.07.2020
comment
Это просто необязательная цепочка. Если вы хотите, чтобы ваш редактор давал предложения во время набора текста, то предпочтительным вариантом будет приведенный выше ответ Роберта. - person Hamza Waleed; 18.05.2021