Реагировать на собственные иконки

Кто-нибудь попытается использовать интерактивные-значки? Я выполняю следующие действия:

  • npm install react-native-icons @latest --save
  • В XCode в навигаторе проектов щелкните правой кнопкой мыши "Библиотеки" ➜ "Добавить файлы" в [название вашего проекта]
  • Перейдите на вкладку node_modules ➜ для реагирования-native-icons➜ и добавьте ReactNativeIcons.xcodeproj
  • Добавьте libReactNativeIcons.a(из раздела "Продукты" в разделе ReactNativeIcons.xcodeproj) в ваш проект. Строки сборки. ➜ Ссылка "Бинарный с фазой библиотек".
  • Добавьте файлы шрифтов, которые вы хотите использовать, в фазу сборки ресурсов копирования Bundle в своем проекте (нажмите "+" и нажмите "Добавить другое...", затем выберите файлы шрифтов из node_modules/react-native- значки/ИОС/Библиотеки/FontAwesomeKit). Запустите проект (Cmd + R)

Мой код

var React = require('react-native');
var Icon = require('FAKIconImage');
var { AppRegistry, StyleSheet, Text, View} = React;

class BringgersApp extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return(
      <View style={styles.container}>        
        <Text style={styles.welcome}>
          Welcome to Bringgers!          
        </Text>
        <Icon
          name='ion|beer'
          size={150}
          color='#887700'
          style={styles.beer} />       
      </View>
    )
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

React.AppRegistry.registerComponent('BringgersApp', function() { return BringgersApp });

После того, как я построю, он говорит, что файл не существует...

Font file doesn't exist

Я очищаю DerivedData и пытаюсь построить много раз, но не работает.

Ответы

Ответ 1

Прежде всего,

  • хранитель react-native-icons сам указывает на более новый и поддерживаемый react-native-vector-icons
  • По-видимому, на данный момент проект rnpm был объединен с native-native.

Другими словами, ваша жизнь может быть такой же простой, как набирать

react-native install react-native-vector-icons
react-native link react-native-vector-icons

И вам может быть хорошо идти *)

*), по крайней мере, он работал на моей машине

Ответ 2

Шаги по установке и использованию значков Ionicons, FontAwesome и Entypo.... p >

Сначала вам нужно установить следующую команду.

react-native install react-native-vector-icons

Затем требуется связать:

react-native link react-native-vector-icons

Импортировать файлы пакета шрифтов на страницу:

import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Entypo from 'react-native-vector-icons/Entypo';

Пример использования:

<View>
    <Text>Ionicons Icons</Text>
    <Icon name='md-bicycle' />

    <Text>FontAwesome Icons</Text>
    <FontAwesome name='trophy' />

    <Text>Entypo Icons</Text>
    <Entypo name='aircraft' />
</View>

Если вы хотите просмотреть список доступных значков, вы можете посмотреть в этом каталоге:

Ионы:

\node_modules\react-native-vector-icons\glyphmaps\Ionicons.json

FontAwesome:

\node_modules\react-native-vector-icons\glyphmaps\FontAwesome.json

Энтыпо:

\node_modules\react-native-vector-icons\glyphmaps\Entypo.json

Предоставление снимков для ваших приложений.

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

Ответ 3

Вы импортировали файл node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/ionicons.ttf в свой проект?

Ответ 4

  • У вас есть "Настройки сборки" → "Пути поиска заголовков" → "$ (SRCROOT)/ node_modules/response-native/React" рекурсивный?
  • Вы включили иконки в "Build phase" → "Copy Bundle Resources" в своем основном проекте?

Ответ 5

Итак, в моем проекте я получаю доступ к значкам через этот код: let { Icon, } = require('react-native-icons');

Хотя у меня никогда не было проблем с использованием значков FontAwesome, у меня были проблемы с использованием значков материалов. Вы также можете проверить react-native-vector-icons.

Ответ 6

Используйте React Native Package Manager: https://github.com/rnpm/rnpm

$npm установить rnpm -g Запуск

Установка зависимости:

Если вы хотите установить зависимость и связать ее за один проход:

$rnpm install react-native-icons Связь зависимости:

Если у вас уже установлены некоторые (но не связанные) модули, запустите:

$rnpm link

Ответ 7

попробовать

rnpm link // If you installed module

Кроме

npm install module-name

и после выполнения

rnpm link

службы перезапуска.

Этот код повторно активирует ваши модули.

Работайте со мной. Спасибо.

Ответ 8

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

перейдите по этой ссылке для получения дополнительной информации о значке родной базы. http://nativebase.io/docs/v2.0.0/components#icon

перейдите по этой ссылке для получения дополнительной информации о списке значков. https://ionicframework.com/docs/v2/ionicons/

ех.

<Icon name='ios-list'  style={style.icon} />

Ответ 9

Шаг 1: Установите response-native-elements

yarn add react-native-elements
# or with npm
npm i react-native-elements --save

Шаг 2: Установите response-native-vector-icons

Если вы уже установили response-native-vector-icons в качестве зависимости для своего проекта, вы можете пропустить этот шаг. В противном случае выполните следующую команду:

# yarn
yarn add react-native-vector-icons
# or with npm
npm i --save react-native-vector-icons

# link
react-native link react-native-vector-icons

и после этого просто используйте их в своем проекте, как

import { Icon } from 'react-native-elements';

class IonBeer extends React.Component {
  render() {
    return (
         <Icon
          name='md-beer'
          type='ionicon'
          color='#887700'
          size=150
        />
    );
  }
}

а затем просто использовать его как.

<IonBeer/>

где угодно

Ответ 10

Если, как и я, вы не хотите импортировать 5000 значков и много кода, просто чтобы воспроизвести несколько значков в своем реактивном проекте, не стесняйтесь использовать этот небольшой фрагмент кода:

https://github.com/2f-concept/react-native-simple-icon

Ответ 11

Для значка вы можете использовать значок векторного знака. Он состоит из различного значка, который мы можем использовать в вашем проекте для внешнего вида.

для более того вы можете посмотреть https://github.com/oblador/react-native-vector-icons.

Для более родных компонентов вы можете взглянуть на nativebase.io. Удивительная библиотека для пользовательского интерфейса в ответе native.