Нижняя навигация Иконки отображаются в виде квадратов в Android и iOS

Question

Я пытаюсь разработать приложение React Native с помощью Expo.

Я нашел несколько очень интересных фреймворков, таких как Reaction-native-Paper.Я пытаюсь использовать их пример Bottom Navigation, см. Ссылку «Попробуйте этот пример на закуску» , которую они предоставляют.

Однако, когда я запускаю пример, ни одно из моих устройств не показывает никакогозначки, просто белые квадраты, где они должны быть.Протестировано на iOS и Android.

import * as React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

export default class MyComponent extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'music', title: 'Music', icon: 'queue-music' },
      { key: 'albums', title: 'Albums', icon: 'album' },
      { key: 'recents', title: 'Recents', icon: 'history' },
    ],
  };

  _handleIndexChange = index => this.setState({ index });

  _renderScene = BottomNavigation.SceneMap({
    music: MusicRoute,
    albums: AlbumsRoute,
    recents: RecentsRoute,
  });

  render() {
    return (
      <BottomNavigation
        navigationState={this.state}
        onIndexChange={this._handleIndexChange}
        renderScene={this._renderScene}
      />
    );
  }
}

Я пробовал гуглить, но не получал особой помощи.Пробовал вручную импортировать иконки, но безуспешно.

import { Ionicons } from '@expo/vector-icons';

Answer 1

Установить react-native-paper с yarn.И устанавливайте эти команды ниже по порядку.

yarn add react-native-paper

yarn add react-navigation-material-bottom-tabs react-native-paper

yarn add react-native-vector-icons

react-native link react-native-vector-icons

Остановите текущий проект, который уже выполняется, и перезапустите react-native run-ios --simulator "iPhone XR", только если он не работает.

Редактировать:

Если вы пользуетесь Экспо, вам не нужно устанавливать векторные иконки.Но вам нужно убедиться, что ваш .babelrc включает babel-preset-expo:

{
  "presets": ["expo"]
}

Если вы не используете приложение React Native Paper, вам также следует добавить react-native-paper/babel к вашему .babelrc, чтобы избежатьимпортировать всю библиотеку.См. Руководство по началу работы для получения дополнительной информации.

Answer 2

1. закрыть работающий упаковщик
2. запустить react-native link react-native-vector-icons
3. и run react-native start --reset-cache
4. Наконец использовать react-native run-ios

Попробуйтеработает rm -rf node_modules && npm install

Если RN <0,29, <code>run rnpm link react-native-vector-icons

Если RN> = 0,29, run react-native link react-native-vector-icons

Также существует вероятность того, что библиотека бумаги снова установит реакцию-native-vector-icon, и Reaction-native также имеет собственный вектор-icon, поэтому между ними возник конфликт.Так же, попробуйте удалить вектор-иконку из библиотеки Paper.

Спасибо !!!