Question

自从过去72小时以来，我一直在试图解决这个问题。

我想要做的就是使用插图画家中的矢量并将其显示在我的本机应用程序上。

我尝试了一些像react-native-vector-icons这样的库，使用icomoon后续步骤，没有结果。

请指导我解决这个问题的完美方案。我没有Web开发人员的经验，我所知道的只是Javascript和反应原生和插图。

//代码

import React, {Component} from "react";
import {View, Text} from "react-native";
import {Font} from "expo";
import {createIconSetFromIcoMoon} from "react-native-vector-icons";
import icoMoonConfig from "../selection.json";
const Icon = createIconSetFromIcoMoon(icoMoonConfig);
Expo.Font.loadAsync("icomoon", require("../assets/fonts/icomoon.ttf"));
export default class INITIATE extends React.Component {

    async componentDidMount() {
        await Font.loadAsync("icomoon",
            require("../assets/fonts/icomoon.ttf"));
        this.setState({fontLoaded: true});
    }

    state = {
        fontLoaded: true
    };

    render() {
        return (
            <View style={{
                flex: 1, justifyContent: "center", alignItems:
                    "center"
            }}>
                {this.state.fontLoaded ? <Icon/> : null}
            </View>
        );
    }
}

//屏幕呈现空白

Answer 1

React Native适用于Android和iOS应用，React JS适用于Web开发。

在React中，首先导入SVG图像：

import sampleSvg from 'imgPath/sample.svg';

然后加载：

<img src={sampleSvg} alt="A Sample SVG Image" />

对于React Native，使用webView有a similar question答案。

或尝试react-native-svg-uri

希望它可以提供帮助！

svg进入react-native项目

1 个答案: