Решение React Native Icon: react-native-svg

SVG Icon React Native

Оригинальный адрес:GitHub.com/hu J IA oh J/ Первоначально…

Большинство реализаций значков React Native в Интернете используют схему значков, а именно:react-native-vector-icons

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

Чтобы избежать этой проблемы, используется схема SVG:react-native-svgреализовать значок

Далее мы поделимся с тремя аспектами:

  • использует react-native-svg
  • Реализация компонента Icon и 2Web
  • Использование компонента Icon

В этой статье будут рассмотрены некоторые знания о React Native для Интернета, используя решение react-native-web, вы можете увидеть статьи, которые я написал ранее:Реагировать на веб-решение: react-native-web

использует react-native-svg

Установить

npm install react-native-svg --save

Link native code

react-native link react-native-svg

Вышеупомянутая операция фактически предназначена для установки зависимостей react-native-svg в клиент.После вышеуказанной операции установка зависимостей была завершена автоматически, но на некоторых IOS будут проблемы.Если вы столкнулись с проблемами, вы можете перейти кreact-native-svgПосмотреть решения

react-native-svg-uri

react-native-svg-uriПоддерживает рендеринг svg через URL или статический файл в RN, а также поддерживает передачу строки svg для ее рендеринга.

Используйте следующим образом:

// 安装
npm install react-native-svg-uri --save
// 确保已在客户端中安装了 react-native-svg 依赖，若未安装依赖，执行：
react-native link react-native-svg

Далее будет использоваться react-native-svg-uri для реализации компонента Icon.Исходный код этой библиотеки имеет только два файла js.Заинтересованные партнеры могут узнать об этом сами~

Реализация компонента Icon и 2web

выполнить

Как мы упомянули выше, React-Nature-SVG-URI поддерживает передачу в строках SVG для рендеринга SVG, поэтому вы можете преобразовать несколько файлов SVG в объект JS или файл JSON в виде скрипта. Формат выглядит следующим образом:

svg.js

export default {
    "arrow-left": "<svg t=\"1533091848499\" class=\"icon\" style=\"\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"579\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\"><defs><style type=\"text/css\"></style></defs><path d=\"M769.405 977.483a68.544 68.544 0 0 1-98.121 0L254.693 553.679c-27.173-27.568-27.173-72.231 0-99.899L671.185 29.976c13.537-13.734 31.324-20.652 49.109-20.652s35.572 6.917 49.109 20.652c27.173 27.568 27.173 72.331 0 99.899L401.921 503.681l367.482 373.904c27.074 27.568 27.074 72.231 0 99.899z\" fill=\"\" p-id=\"580\"></path></svg>"
}

При использовании вы можете передать значение соответствующего ключа в react-native-svg-uri для рендеринга.

Приведенный выше сценарий преобразования может относиться к:svg2json, код:GitHub.com/hu J IA о J/SV…

После завершения преобразования файла мы можем разработать компонент Icon.

index.js

import createIconSet from './create-icon-set';
// 即上面转换得到的 svg.js
import svg from './svg';

const Icon = createIconSet(svg, 'rn_components');

export default Icon;

export { createIconSet };

creact-icon-set.native.js

import React, { Component } from 'react';
import SvgUri from 'react-native-svg-uri';

export default function createIconSet(svg, fontName) {
    return class Icon extends Component {
        render () {
            const { icon, color, size, style } = this.props;
            let svgXmlData = svg[icon];

            if (!svgXmlData) {
                let err_msg = `no "${icon}"`;
                throw new Error(err_msg);
            }
            return (
                <SvgUri width={size} height={size} svgXmlData={svgXmlData} fill={color} style={style} />
            );
        }
    };
}

Выше приведена реализация компонента Icon.

2web

Маленькие партнеры, заинтересованные в RN2Web, могут посмотреть:Реагировать на веб-решение: react-native-web

Исходя из этого, нам необходимо поддерживать 2web для нашего компонента Icon, поскольку соответствующего веб-компонента нет, нам нужно реализовать соответствующий веб-компонент самостоятельно.

На веб-стороне мы используем iconfont для создания компонентов Icon (примечание: iconfont не поддерживает многоцветные значки, многоцветные значки могут выбирать только svg или img)

Или проблема преобразования файла svg, нам нужно сначала преобразовать файл svg в iconfont, то есть

Таким образом, мы можем использовать иконочный шрифт, как обычный веб-сайт.

Вышеупомянутые инструменты преобразования могут относиться к:svg2iconfont, код:GitHub.com/hu J IA о J/SV…

Конечно, не забудьте импортировать сгенерированный файл iconfont.css в html страницы.Далее давайте посмотрим на реализацию компонента Icon 2web.Дополнительную папку создавать не нужно, достаточно добавить новую папка в той же папке.creact-icon-set.jsфайл (обратите внимание, что файл для RN ​​вышеcreact-icon-set.native.js), который автоматически идентифицирует эти два файла во время фактического использования.

creact-icon-set.js

import React, { Component } from 'react'
import { createElement, StyleSheet } from 'react-native'

export default function createIconSet(svgs, fontName) {
  return class Icon extends Component {
    render() {
      const { icon, color, size, style } = this.props
      const styles = StyleSheet.create({
        iconStyle: {
          color,
          fontSize: size,
        },
      })
      const props = {
        className: `${fontName ? fontName + '-' : 'icon-'}${icon}`,
        style: StyleSheet.compose(
          style,
          styles.iconStyle
        ),
      }
      return createElement('i', props)
    }
  }
}

если ты читаешьРеагировать на веб-решение: react-native-web, ты должен знатьimport { createElement, StyleSheet } from 'react-native'в реальностиimport { createElement, StyleSheet } from 'react-native-web', да, именно использовать API react-native-web напрямую для разработки компонентов после перехода на веб

Вышеприведенное завершает поддержку 2web компонента Icon.

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

Как мы это используем? Есть два случая:

Используйте компонент Icon, чтобы добавить свой собственный значок

Компонент Icon будет поставляться с некоторыми часто используемыми значками.При использовании этих значков их относительно просто использовать и напрямую импортировать следующим образом:

// 引入
import Icon from 'Icon';

// 使用
<Icon icon={'arrow-left'} size={30}/>

Примечание. Если вам необходимо поддерживать 2web, вам необходимо преобразовать соответствующийiconfont.cssВведен в html страницы

Используйте бизнес-иконки

Если вам нужно добавить бизнес-значок, выполните следующие два шага:

1. Конвертируйте файл svg в js (если вам нужна поддержка 2web, вам нужно сгенерировать iconfont)

В этой части не будет подробностей, обратитесь к содержанию выше

2. Вызовите createIconSet, чтобы создать новый компонент CIcon.

код показывает, как показано ниже:

import React from 'react'
// 引入Icon组件的 createIconSet 方法
import { createIconSet } from 'Icon'
// 包含业务svg的js文件
import svgs from './svgs'

// 传入业务svg的js对象，生成CIcon组件
const CIcon = createIconSet(svgs)

export default function () {
  return Object.keys(svgs).map((item, index) => (
    // 使用
    <CIcon icon={item} color={'#000'} size={50} key={index} />
  ))
}

Все приведенные выше коды можно посмотреть в разработанном мной проекте библиотеки компонентов РН:rn_components, библиотека компонентов только начала создаваться и будет продолжать улучшаться в будущем.

напиши в конце

Выше я делюсь решением React Native Icon: react-native-svg, я надеюсь, что это может быть полезно тем, кто в этом нуждается~~~

Если вам понравилась моя статья, вы можете перейтимой личный блогнажмите звездочку ⭐️

Категории