React Native中如何使用react-native-svg加载本地svg矢量图片?

MasterCo

已于 2022-10-23 23:35:21 修改

阅读量1.7k

点赞数

文章标签： react native react.js javascript

于 2022-10-23 23:32:34 首次发布

本文链接：https://blog.csdn.net/qq_20825669/article/details/127482962

版权

1.下载react-native-svg库

npm:
npm install react-native-svg

yarn:
yarn add react-native-svg

2. 下载安装react-native-svg-transformer库 (必须安装)

React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a Web application when using a library like SVGR to transform your imported SVG images into React components.This makes it possible to use the same code for React Native and Web.

npm:
npm install --dev react-native-svg-transformer

yarn:
yarn add --dev react-native-svg-transformer

3. 打包文件配置

文件名: metro.config.js
文件位置: 与package,json同级目录
版本要求: React Native v0.59 或者更高版本

将以下内容复制到metro.config.js文件中:

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

4. 导入本地SVG矢量图片

import SvgImageFile from "./loading.svg";

5. 使用SVG的图片组件

/* Copyright (C) 2022 MasterCo. All Rights Reserved */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
} from 'react-native';
import SvgImageFile  from "./loading.svg";

/*
 * SVG资源调试页面
 * @auther MasterCo
 * @since 2022-10-23
 */
export default class SvgTest extends Component {
    render() {
        return (
            <View style={styles.container}>
                <SvgImageFile  style={styles.loadingImage}/>
                <Text style={styles.hello}>Hello, World</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems:"center"
    },
    loadingImage :{
        width:100,
        height:100
    },
    hello: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    }
});

矢量图片可前往IconFont下载