RN—使用svg格式的图标

1、安装组件

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

2、配置metro打包器

配置文件：metro.config.js

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('@react-native/metro-config').MetroConfig}
 */
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

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

3、添加TypeScript类型声明

在项目根目录中添加文件【declarations.d.ts】并编写内容如下：

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

4、在tsconfig.json文件中添加TypeScript类型声明文件

{
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    "types": ["jest"],
    "esModuleInterop": true
  },
  "include": [
    "**/*.ts", 
    "**/*.tsx",
    "declarations.d.ts"
  ],
  "exclude": ["node_modules", "Pods"]
}

5、使用svg文件

import Back from '../../assets/svg/back.svg';

export default function FirstLoginPage(){
    const storage = createMMKV();

    return (
        <View style={styles.container}>
            <Back />
        </View>
    );
}