Question

我需要将一个矢量（.svg）图像插入到本机应用程序中。你能帮我吗？

我不知道如何实现这一目标，而且似乎反应本地化并不支持svg。

任何帮助将不胜感激。

Answer 1

有一些工具（https://github.com/seekshiva/react-native-remote-svg和其他工具），但是，我尝试了一些没有好结果的工具，所以我决定创建一个矢量字体，效果非常好。为此，您可以使用these techniques将一组svg图像转换为字体（.ttf）。您将真正获得更多可自定义的选项，使用字体而不是图像。

我选择IcoMoon来创建字体（您也可以使用http://fontello.com/或任何其他您喜欢的解决方案），在创建字体后，程序下载，您将获得一个包含选择的.zip文件.json和icomoon.ttf，将两个文件（将文件如下所示）复制到您的RN项目中。下一步是安装react-native-vector-icons，使用矢量图标，你也可以使用免费的图标字体作为字体 - 真棒和其他。 GitHub：https://github.com/oblador/react-native-vector-icons

安装依赖项并将其链接到ios一个安卓文件夹：

npm install react-native-vector-icons --save
react-native链接

使用fontawesome的样本：

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

将您的图标放入应用中。要使用您创建的自定义字体，您必须：

将.ttf放在项目基础的./resources/fonts文件夹中
在package.json的第一级添加这段代码：＆＃34; rnpm＆＃34;：{＆＃34; assets＆＃34;：[＆＃34; resources / fonts＆＃34; ]}，
在您的终端：react-native link

要在本机中使用自定义字体，您必须：

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）图插入到反应本机应用程序中的最佳方法

1 个答案: