React Navigation TabBarIcon не отображается

Я не могу заставить TabBarIcon появиться в моем TabNavigator.. Я прочитал кучу сообщений от людей с похожей проблемой, но их решения не работают для меня. Я бы просто хотел иметь компонент изображения PNG для каждого TabBarIcon, но он просто не появится.

const Tabs = TabNavigator({
    Feed: {
      screen: FeedPage,
      navigationOptions: {
        tabBarLabel:"Feed",
        tabBarIcon: () => (<Image source = {require('./Resources/Images/TabBar Icons_Feed.png')} style = {{height: 10, width: 10}} />)
      }
    },
    Me: {
      screen: MePage,
      navigationOptions: {
        tabBarLabel:"Me",
      }
    },
  },
  {
    initialRouteName: 'Me',
    tabBarOptions: {
      showIcon: true,
      showLabel: true
    }
  }
);

const RootStack = StackNavigator(
  {
    //All Tabs
    Tabs: {
      screen: Tabs,
    },
    //Other Pages
    Signup: {
      screen: SignupPage,
    },
    ProfilePicUploader: {
      screen: ProfilePicUploaderPage,
    },
    Login: {
      screen: LoginPage,
    },
    User: {
      screen: UserPage,
    },
    EasterEgg: {
      screen: EasterEggPage,
    },
  },
  {
    initialRouteName: 'Tabs',
    headerMode: 'none'
  }
);

export default class App extends Component<Props> {
  render() {
    return (
      <RootStack/>
    );
  }
}

Кто-нибудь знает, что происходит?

Возможно, изображение просто обрезается. Можете ли вы подтвердить, что изображение отображается в обычных обстоятельствах, как если бы оно было отображено на странице? Попробуйте использовать resizeMode: contain в стиле образа.

— 21.03.2018 23:01

@JulianK Изображение отображается в противном случае, и другие изображения также не работают, когда помещаются на его место. resizeMode: contain не работает.

— 31.03.2018 08:05

reactjs react-native react-navigation

19.03.2018 20:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 406

Ответы 3

Не могли бы вы попробовать это? Это моя установка:

const PrimaryNav = TabNavigator({
  ['app/t1']: { screen: T1 },
  ['app/t2']: { screen: T2 },
}, {
  headerMode: 'none',
  initialRouteName: 'app/t1',
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      if (routeName === 'app/t1') {
        return <Icon name = "event-note" color = {tintColor} />;
      } else if (routeName === 'app/t2') {
        return <Icon name = "place" color = {tintColor} />;
      }
      return null;
    },
  }),
  tabBarOptions: {
    showIcon: true,
    showLabel: false,
    activeTintColor: ApplicationStyles.screen.header.tintColor,
    inactiveTintColor: ApplicationStyles.screen.header.inactiveTintColor,
    style: {
      backgroundColor: ApplicationStyles.screen.header.backgroundColor,
    },
  }
})

<Icon> - это значок response-native-material-ui, но изображение также должно работать.

Проклятие. Что вы получаете вместо иконы? Пустой?

— 20.03.2018 03:19

20.03.2018 03:12

Вам просто нужно убедиться, что в имени вашего файла нет пробелов. Так что замените TabBar Icons_Feed.png на TabBar_Icons_Feed.png. Потому что android или ios найдут имя как /xxxx/Resources/Images/TabBar%20Icons_Feed.png. На самом деле packager выполняет свою работу. См. здесь:

The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for my-icon.png in the same folder as the component that requires it. Also, if you have my-icon.ios.png and my-icon.android.png, the packager will pick the correct file for the platform.

Проверить действительный / правильный путь к файлу

если вы видите .expo/packager-info.json:

{
  "expoServerPort": 19000,
  "packagerPort": 19001,
  "packagerPid": 84703
}

поскольку вы видите, что порт packager - это 19001, тогда вы можете получить доступ к своему файлу с помощью http://127.0.0.1:19001/Resources/Images/TabBar Icons_Feed.png (убедитесь, что приложение уже запущено) в браузере. Вы можете убедиться, что все файлы пути верны.

Разрешение на Android

Кроме того, если вы используете expo для разработки, убедитесь, что вы установили разрешение на запись в ящик для Android (источник).

Лучшая практика

Я обычно использую образ import вот так:

import Icon_Feed from './Resources/Images/TabBarIcons_Feed.png';

...

tabBarIcon: () => (
    <Image
        source = {Icon_Feed}
        style = {styles.stretch}
        />
)

Работает и читабельнее.

31.03.2018 12:25

Я установил минимально возможный пример для отображения изображения на вкладках вместо значков, посмотрите на эта закуска на выставке. Не используйте resizeMode или spaces в имени файла образа, так как вы используете TabBar Icons_Feed.png. Просто импортируйте файл и используйте его с правильной высотой и шириной, например

import Icon_Feed from './Resources/Images/TabBar_Icons_Feed.png';

и используйте это так

tabBarIcon: () => (
    <Image source = {Icon_Feed} style = {{ height: 20, width: 20 }} />
),

ИЛИ ЖЕ

Вы можете использовать require, если хотите, например.

tabBarIcon: () => (
    <Image source = {require('./Resources/Images/TabBar_Icons_Feed.png')} style = {{ height: 20, width: 20 }} />
),

Прочтите это руководство по изображениям в официальной документации по реакции, чтобы получить возможные способы управления изображением и правильного отображения его в соответствии с вашими потребностями.

02.04.2018 10:41