这是将向量(SVG)图插入React Native应用程序的最佳方法 [英] Which is the best approach to insert an vector (svg) graph into a react native application

问题描述

我需要将矢量(.svg)图像插入到本机应用程序中.你能帮我吗?

I need to insert a vector (.svg) image into a react-native app. Could you help me please.

我不知道如何实现这一目标，而且似乎React-native不支持svg.

I have no idea how to achieve this, and seems like react-native doen't support svg.

任何帮助将不胜感激.

推荐答案

有些工具( https://github.com/seekshiva/react-native-remote-svg 等)，但是，我尝试了其中一些工具，但收效不佳，因此我决定创建矢量字体，并且效果很好.为此，您可以使用

There are some tools (https://github.com/seekshiva/react-native-remote-svg and others), however, I tried some these tools without good results, so I decided to create a vector font and that works very well. For that you can convert a set of svg images to font (.ttf) using these techniques. You will really get more customizable options with a font instead an image.

我选择了IcoMoon来创建字体(您也可以使用 http://fontello.com/或其他任何您喜欢的解决方案)，创建字体后，进行下载，您将获得一个包含selection.json和icomoon.ttf的.zip文件，将这两个文件(如下所示放置文件)复制到您的RN项目中.下一步是安装react-native-vector-icons，使用vector-icons您还可以使用免费的图标字体，例如font-awesome和其他字体. GitHub: https://github.com/oblador/react-native-vector-icons

I choosed the IcoMoon to create the font (you also can do it with http://fontello.com/ or any other solution you prefer), after create your font, proced the download, you will get a .zip file contain the selection.json and the icomoon.ttf, copy both files (place the files as showed below) to your RN project. The next step is install react-native-vector-icons, with vector-icons you also can work with free icons fonts as font-awesome and others. GitHub: https://github.com/oblador/react-native-vector-icons

安装依赖项，并使用以下命令将其链接到ios的android文件夹中:

Install the dependencies and link it to ios an android folders with:

npm install react-native-vector-icons --save
反应本机链接

npm install react-native-vector-icons --save
react-native link

使用fontawesome进行采样:

sample using fontawesome:

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

将图标放置在您的应用中.要使用您创建的自定义字体，您必须:

Put your icons in your app. To use the custom font you created, you have to:

1. 将.ttf放在项目基础的./resources/fonts文件夹中
2. 在package.json的第一级添加以下代码: "rnpm":{资产":[资源/字体"]}，
3. 在您的终端中:react-native链接

1. Put your .ttf in a ./resources/fonts folder at the base of your project
2. Add this piece of code at the first level of your package.json: "rnpm": { "assets": [ "resources/fonts" ] },
3. In your terminal: react-native link

要在React Native中使用自定义字体，您必须:

And to use your custom font in a react native you have to:

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>
    );
  }
}

这篇关于这是将向量(SVG)图插入React Native应用程序的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！