Какой лучший подход для вставки векторного (svg) графа в собственное приложение реакции?

Question

Мне нужно вставить векторное изображение (.svg) в приложение-родное приложение. Не могли бы вы мне помочь, пожалуйста.

Я понятия не имею, как этого добиться, и похоже, что реактивная система не поддерживает SVG.

Любая помощь будет оценена.

Answer 1

Есть некоторые инструменты ( https://github.com/seekshiva/react-native-remote-svg и другие), однако некоторые из этих инструментов я пробовал без хороших результатов, поэтому я решил создать векторный шрифт, и он работает очень хорошо, Для этого вы можете конвертировать набор изображений SVG в шрифт (.ttf), используя эти методы. Вы действительно получите больше настраиваемых параметров со шрифтом вместо изображения.

Я выбрал IcoMoon для создания шрифта (вы также можете сделать это с http://fontello.com/ или любым другим решением, которое вы предпочитаете), после создания шрифта, процедуры загрузки, вы получите файл.zip, содержащий выбор.json и icomoon.ttf, скопируйте оба файла (поместите файлы, как показано ниже) в ваш проект RN. Следующим шагом является установка response-native-vector-icons, с vector-icons вы также можете работать с бесплатными шрифтами иконок как font-awesome и другими. GitHub: https://github.com/oblador/react-native-vector-icons

Установите зависимости и свяжите их с папками ios android:

npm install реактивные родные векторные иконки --save
Реактивная ссылка

образец с использованием Fontawesome:

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)

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

1. Поместите ваш.ttf в папку./resources/fonts в основании вашего проекта.
2. Добавьте этот фрагмент кода на первом уровне вашего package.json: "rnpm": { "assets": [ "resources/fonts" ] },
3. В вашем терминале: реакция-родная ссылка

И чтобы использовать свой собственный шрифт в реагирующем нативе, вы должны:

import React, { Component } from 'react';
import {Platform, View } from 'react-native';
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(icoMoonConfig);
//a constant with your icon with with and color
const home = (<Icon name="home" size={30} color="#f7a805" />);

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          {home}
      </View>
    );
  }
}