Блог

Главная - Вопросы по программированию - Панель вкладок не отображается в React Navigation 5

Панель вкладок не отображается в React Navigation 5

#reactjs #react-native #navigation #react-navigation #screen

#reactjs #react-native #навигация #react-навигация #экран

Вопрос:

Я использую react-navigation для создания панели вкладок. Итак, вот код панели вкладок, которую я создал:

 const Tabbar = () => {
  return (
    <NavigationContainer>
      <TabNav.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused }) => {
            let iconName;     

            if (route.name === 'Home') {
              iconName = focused
                ? <HomeBold />
                : <Home />
            } else if (route.name === 'Music') {
              iconName = focused
                ? <SoundBold />
                : <Sound />
            } else if (route.name === 'Profile') {
              iconName = focused
                ? <PersonalRoomBold />
                : <PersonalRoom />
            }

            return <Image name={iconName} />;
          },
        })}      
      >      
        <TabNav.Screen 
          name="Home"
          component={HomeScreen}
        />
        <TabNav.Screen 
          name="Music"
          component={MusicScreen}
        />
        <TabNav.Screen 
          name="Profile"
          component={ProfileScreen}
        />
      </TabNav.Navigator>
    </NavigationContainer>
  )
}

Я ожидаю получить что-то вроде этого:

введите описание изображения здесь

Но ничего не получается. Как я могу это исправить?

Комментарии:

1. Значит, он просто ничего не отображает на экране? Или результат не такой, как вы ожидаете

2. Если вы говорите о значках, которые не отображаются, это имело бы смысл, потому что вы возвращаете Image компонент с name реквизитом с компонентом в качестве значения. Я предполагаю, что вы хотите использовать векторные значки вместо таких изображений: github.com/oblador/react-native-vector-icons#basic-example . Сама панель должна отображаться нормально.

3. Итак, я должен просто использовать компонент значка из react-native-vector-icons вместо изображения, верно?

4. Да, и имя реквизита Icon принимает строку. Вы можете найти весь список значков с соответствующими именами для разных наборов значков здесь: oblador.github.io/react-native-vector-icons .

5. Спасибо за помощь, чувак