Как показать файлы SVG в реагирующем - PullRequest
Новая
       10

Как показать файлы SVG в реагирующем

3 голосов
/ 23 мая 2019

Я хочу визуализировать изображения из файлов SVG, сгенерированных иллюстратором, я использую act-native 0,59, реагировать-native-svg и реагировать-native-svg- * 1006 URI *, Вот мой jsx: 

  <View style={styles.aboutSection}>
              <SvgUri
                width="150"
                height="150"
                source={require('../../assets/images/logo_blue.svg')}
              />
    </View>

и мой SVG-файл: 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-574 823.3 20 14" style="enable-background:new -574 823.3 20 14;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#2A327B;}
</style>
<g>
    <g transform="translate(-320.000000, -1983.000000)">
        <g transform="translate(40.000000, 1680.000000)">
            <path class="st0" d="M-284,1140.3c-7.4,0-10-7-10-7s3.4-7,10-7c6.7,0,10,7,10,7S-277.3,1140.3-284,1140.3L-284,1140.3z
                 M-284,1129.3c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S-281.8,1129.3-284,1129.3L-284,1129.3z M-284,1135.3c-1.1,0-2-0.9-2-2
                s0.9-2,2-2s2,0.9,2,2S-282.9,1135.3-284,1135.3L-284,1135.3z"/>
        </g>
    </g>
</g>
</svg>

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

1 Ответ

1 голос
/ 26 мая 2019

Поскольку пакет, похоже, больше не поддерживается, после хорошего времени поиска я в конечном итоге использовал нестандартные веб-шрифты с помощью act-native-icons :

  1. (Необязательно) Для минимизации размера SVG я использовал для этой цели SVG minizer
  2. Преобразование шрифтов с помощью icomoon
  3. Добавить сгенерированный шрифт в папку assets / fonts в корневом каталоге
  4. Добавить компоновщик в packages.json 
    "rnpm": {
        "assets": [
        "./assets/fonts/"
        ]
    }
И свяжите его, используя react-native link Для создания пользовательского компонента значков, который я использовал act-native-icons , он имеет функцию createIconSetFromIcoMoon дляотображать шрифт, сгенерированный из IcoMoon, а также сгенерированный из Fontello

В моем пользовательском компоненте MyIcon.js я также добавляю сгенерированный selection.json. 

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import MyIconConfig from '../../../selection.json';

const MyIcon = createIconSetFromIcoMoon(MyIconConfig, 'MyIcon-icons', 'MyIcon-icons.ttf');
 //name of font I used in the website to generate font and name of ttf files generated
export default MyIcon;

Я использую его в своем компоненте, я нашел имена значков, которые я нашел в demo.html: 

<MyIcon
 style={styles.customStyle}
 name="previous"
 size={18}
 color=’red’
/>

Примечание: Сначала у меня возникла проблема, ящикивместо значков, я понизил act-native-icons до 6.3.0 , и я удалил свое приложение и переустановил его, перезапустив: 

react-native run-android
...