Совместное использование галантереи ReactNative — использование пользовательских значков значков

Ресурсы изображений Icon React.js React Native

В процессе разработки приложения мы будем использовать различные значки.Попрактиковавшись, мы обнаружили проблему.Использование картинок для отображения значков в React Native будет очень медленно загружаться.Часто значки остаются пустыми и загружаются через долгое время . В этом случае использование значков шрифтов может очень хорошо решить эту проблему. Каковы преимущества использования значков шрифтов по сравнению с изображениями?

Преимущества шрифтовых иконок

  1. Отображение на основе текстового компонента, быстрая скорость загрузки
  2. Вы можете установить стиль шрифта, чтобы изменить размер, цвет значка
  3. Векторная иконка, увеличение и уменьшение без искажений
  4. Хорошая совместимость, подходит для различных браузеров
  5. Простой дизайн и богатая библиотека иконок, таких какFontAwesome,iconfont
  6. Самый важный момент заключается в том, что он не будет изменен из-за небольшого изменения, такого как изображение, мы можем просто изменить стиль шрифта напрямую✌️

Одна из лучших библиотек для использования значков шрифтов в React Native —react-native-vector-icons, несколько библиотек значков, включенных в эту библиотеку в ежедневной разработке, могут в основном удовлетворить наши потребности, если все еще есть недостатки, вы можете использовать пользовательские значки шрифтов.

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

  1. react-native-vector-iconsподробное использование.
  2. Из официальной библиотеки иконок AliiconfontКак скачать иконки шрифтов без использования других сторонних библиотек.
  3. react-native-vector-iconsРасширенное использование: создание пользовательских шрифтов с использованием ресурсов значков, загруженных на основе значков.

react-native-vector-iconsиспользование

Сначала поговорим о конфигурации установки:

Установить и настроить

  1. Использовать в корневом каталогеnpm install react-native-vector-icons --saveилиyarn add react-native-vector-iconsУстановить.
  2. Запустить после завершения установкиreact-native link react-native-vector-iconsКомандная ссылка на эту библиотеку
  3. Конфигурация на стороне Android

воплощать в жизньreact-native linkПосле команды вы обнаружите, что эта библиотека автоматически импортировала для нас файл шрифта в каталог Android.app/src/mainв и создалassets/fontsКаталог

Тогда мы собираемсяandroid/app/build.gradleДобавьте в файл следующее:

// 自定义的字体文件需要在这里赋值声明，如果有多个都需要添加到数组中
project.ext.vectoricons = [
    iconFontNames: [ 'iconfont.ttf' ]
]

// 如果只是使用react-native-vector-icons中的图标，只添加下面这行就行了，上面那段配置可以不写
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  1. Конфигурация на iOS

бегатьreact-native linkПосле команды вы обнаружите, что в файле info.plist в каталоге проекта iOS есть еще одна строкаFonts provided by application, так же можно настроить вручную, нужно поставитьreact-native-vector-iconsВсе шрифты добавляются следующим образом:

Затем в XcodeBuild Phaseнайти вLink Binary With Libraries, вставьте автоматическую ссылкуlibRNVectorIcons.aЭта статическая библиотека удалена, нажмите кнопку +, чтобы добавить ее снова, чтобы можно было успешно скомпилировать сторону iOS.

На данный момент обе стороны настроены, и вы можете использовать их напрямую.

основное использование

1. Использовать как компонент Icon

import Icon from 'react-native-vector-icons/FontAwesome';

<Icon name={'angle-right'} size={24} color={'#999'}

На следующем рисунке показан интерфейс настройки с использованием значка FontAwesome.

Если вы одновременно используете несколько значков библиотеки ресурсов, таких как FontAwesome, Ionicons, Feather и т. д., в качестве ссылки на компонент Icon, чтобы избежать путаницы в имени компонента Icon, вы можете использовать разные имена при импорте, а имя компонента соответствует имени импорта при его использовании.

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

<FontAwesomeIcon name={'angle-right'} size={24} color={'#999'}/>
<Icon name={'ios-sad'} size={100} color={'#999999'}/>

2. Использовать как компонент кнопки

import Icon from 'react-native-vector-icons/FontAwesome';

<Icon.Button name="star" backgroundColor="#999999" onPress={this.starOnGithub}>
    Give me a star on Github😁
</Icon.Button>

3. Используется как статический ресурс изображения

Иногда мы можем не захотеть использовать компонент значка, но хотим использовать компонент изображения для отображения этих значков шрифта, что нам делать? Посмотрите на код:

import Icon from 'react-native-vector-icons/FontAwesome';

constructor(props) {
    super(props);
    this.state = {
      userIcon: null,
    };
}

componentWillMount() {
    Icon.getImageSource('user', 50, '#999').then((source) => {
      this.setState({
        userIcon: source
      })
    });
  }

Сначала объявите userIcon в состоянии, затем используйте метод getImageSource компонента Icon, чтобы получить ресурс значка и назначить его userIcon, а затем установите userIcon, где компонент Image должен использоваться в функции рендеринга.

<Image source={this.state.userIcon}/>

4. Используйте с компонентом TabBarIOS

import Icon from 'react-native-vector-icons/Ionicons';

<Icon.TabBarItemIOS
    title={'Home'}
    iconName={'ios-home-outline'}
    selectedIconName={'ios-home'}
    iconColor={'#888'}
    selectedIconColor={'#ff0098'}
    selected={this.state.selectedTabIndex === 0}
    renderAsOriginal
    onPress={() => {
        this.setState({
            selectedTabIndex: 0
        })
    }}
>

5. Использование в компоненте NavigatorIOS

NavigatorIOSЭто эксклюзивный компонент для iOS. Здесь значок шрифта в основном используется на панели навигации. Метод использования такой же, как и использование ресурса статического изображения, упомянутого в третьем пункте выше, поэтому я не буду здесь вдаваться в подробности. Следует отметить, чтоNavigatorIOSОн не будет повторно отображаться, поскольку значение свойства в состоянии изменяется, поэтому значок на панели навигации может не отображаться после getImageSource, пожалуйста, посмотрите здесьreact-native-vector-iconsОфициальный документ, очень подробно объясняет руководство по предотвращению ям:

Note: Since NavigatorIOS doesn't rerender with new state and the async nature of getImageSource you must not use it with initialRoute until the icon is rendered, but any view added by push should be fine. Easiest way is to simple add an if statment at the beginning of you render method like this:

render() {
    if (!this.state.myIcon) {
      return false;
    }
    return (<NavigatorIOS ... />);
  }

Короче говоря, это добавить суждение, прежде чем принимать значение...

6. Использовать в ToolbarAndroid компонент

Есть два способа: один — получить ресурс статического изображения компонента Icon и использовать его в собственном компоненте ToolbarAndroid, а другой — использовать компонент Icon.ToolbarAndroid.

import Icon from 'react-native-vector-icons/FontAwesome';

constructor(props) {
    super(props);
    this.state = {
      appLogo: null,
    };
  }
  
componentWillMount() {
    Icon.getImageSource('android', 36, '#92c029').then((source) => {
      this.setState({
        appLogo: source
      })
    });
}
  
render() {
    return (
      <View style={styles.container}>
        <ToolbarAndroid
          style={styles.toolbar_system}
          logo={this.state.appLogo}
          title={'This is an android toolbar'}
        />
        <Icon.ToolbarAndroid
          navIconName={'amazon'}
          style={styles.toolbar_iconfont}
          titleColor="white"
          title={'This is an Icon toolbar'}
        />
      </View>
    )
  }

Использование библиотеки векторных иконок Ali.

Вышеупомянутое касается использования иконок шрифтов на основе сторонних библиотек, что если вы хотите использовать собственные иконки? Вот официальная библиотека иконок Ali для иллюстрации. Сайт требует авторизации для скачивания ресурса.

  1. существуетiconfontВыберите группу значков случайным образом, добавьте все значки в корзину, щелкните корзину и щелкните код загрузки ниже, чтобы загрузить ресурсы локально.
  2. Разархивируйте zip-файл, в папке вы увидите следующие файлы:

вdemo_unicode.htmlСодержит символы Юникода, соответствующие всем иконкам, которые мы используем для отображения иконок.

  1. Скопируйте файл iconfont.ttf в каталоги проектов Android и iOS соответственно.

Android размещен вapp/src/main/assets/fontsпапка и вapp/src/build.gradleДобавьте конфигурацию в:

project.ext.vectoricons = [
    iconFontNames: [ 'iconfont.ttf' ]
]

Здесь уже было сказано.

iOS необходимо добавить в проект iconfont.ttf, вы можете создать папку Fonts, поместить в нее iconfont.ttf, а затем добавить в проект каталог Fonts. в Info.plistFonts provided by applicationДобавьте следующую строку iconfont.ttf.

Принцип использования

С помощью компонента «Текст» задайте символ Юникода для отображения значка. Текстовый компонентfontFamilyбыть настроенным наiconfont,fontSizeМожет использоваться для установки размера значка шрифта.

На практике я обнаружил проблему.Использование только компонента Text для установки символов юникода может отображать значки.Если значков несколько, я хочу быть ленивым и помещать все символы юникода в виде строк в массив, используйте Метод map массива отображает компонент Text в цикле.В настоящее время компонент Text представляет собой строку, и все значки не могут отображаться нормально, все из которых являются строками. Позже я обнаружил, что этот метод должен преобразовывать строку юникода, например&#xe6a7;Превратиться в\ue6a7Вот и все.

Код здесь не размещен, картинка выше:

использоватьreact-native-vector-iconsСоздайте собственную библиотеку значков

直接使用unicode编码的方式比较简单，但是在代码层面来看就不怎么直观，毕竟都是unicode编码，还容易拼写出错。 использоватьreact-native-vector-iconsСоздание пользовательской библиотеки значков — лучший выбор, ее удобнее поддерживать, и она может эффективно избежать ошибок.

Первый взглядreact-native-vector-iconsсерединаFontAwesomeКак создать собственную библиотеку значков шрифтов:

import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/FontAwesome.json';

const iconSet = createIconSet(glyphMap, 'FontAwesome', 'FontAwesome.ttf');

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

можно увидеть б/уreact-native-vector-iconsсерединаcreateIconSetметод создания библиотеки иконок, и в то же время согласноFontAwesome.jsonсоответствовать значку. нажмите, чтобы открытьFontAwesome.jsonпредставляет собой набор сопоставлений имен значков и десятичных кодировок:

{
  "glass": 61440,
  "music": 61441,
  "search": 61442,
  ......
}

Теперь, когда у нас есть iconfont.ttf, мы также можем создать набор иконок шрифтов в соответствии с этим методом, а затем использовать наш iconfont так же, как FontAwesome и несколько других библиотек иконок, упомянутых выше.

Сгенерировать iconfont.json

Во-первых, нужно получить файл iconfont.json.В распакованном файле есть файл iconfont.svg, когда мы загружали ресурс iconfont ранее, где мы можем найти имя каждой иконки и соответствующий шестнадцатеричный код юникода.Системный код преобразуется до десятичной, а состав аналогичен приведенному вышеFontAwesome.jsonПодойдут те же данные json.

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

Ссылка на скрипт:GitHub.com/policy/RN и…, я использую сценарий этого великого бога.

Поместите файл сценария iconfont_mapper.sh и iconfont.svg в один и тот же каталог, откройте командную строку или терминал и выполните следующие команды:

./iconfont_mapper.sh iconfont.svg

Если сообщается об ошибке под macPermission deniedПросто измените права доступа к файлу

chmod 777 iconfont_mapper.sh

Затем выполните приведенную выше команду, преобразуйте iconfont.svg, чтобы получить файл iconfont.json.

Создать CustomIconFont

Добавим в наш проект iconfont.json, теперь мы можем создать собственную библиотеку иконок, создадим файл CustomIconFont.js, добавим следующий код:

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './iconfont.json';

// glyphMap, fontFamily, fontFile三个参数，注意看react-native-vector-icons官方文档中方法注释，
// Android中fontFamily可以随便写，iOS必须是正确的名字否则运行报错，iOS可以直接双击iconfont.ttf打开看字体实际叫什么名字
const iconSet = createIconSet(glyphMap, 'iconFont', 'iconfont.ttf');

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

На данный момент я считаю, что все уже знают, как использовать эту библиотеку иконок, да, иreact-native-vector-iconsТочно так же используется встроенная библиотека иконок.

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

import CustomIconFont from './CustomIconFont';

// 用作图标组件
<CustomIconFont name={'tubiaozhizuomobanyihuifu_'} size={24} color={'#00c06d'}/>

// 用作Button
<CustomIconFont.Button name={'tubiaozhizuomobanyihuifu_23'} backgroundColor={'#59ACEA'}>
    Test icon button
</CustomIconFont.Button>

Наконец, изображение эффекта прилагается:

Полный код проекта:GitHub.com/Nobody Arron at/Hot…, Chapter9-IconfontExample

Категории