gpt4 book ai didi

react-native - 哪种是将矢量(svg)图插入到 react native 应用程序中的最佳方法

转载 作者:行者123 更新时间:2023-12-04 05:00:11 26 4
gpt4 key购买 nike

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

我不知道如何实现这一点,而且似乎 react-native 不支持 svg。

任何帮助将不胜感激。

最佳答案

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

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

安装依赖项并将其链接到 ios 和 android 文件夹:

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

使用 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 ”:[“资源/字体”]},
  3. 在您的终端中:react-native 链接

要在 react native 中使用您的自定义字体,您必须:

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

关于react-native - 哪种是将矢量(svg)图插入到 react native 应用程序中的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49951885/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com