如何使用react-native-svg和react-native-svg-transformer加载本地svg图片

要使用 `react-native-svg` 和 `react-native-svg-transformer` 加载本地 SVG 图像，你可以按照以下步骤进行操作：

1. 首先，确保你已经在项目中安装了 `react-native-svg` 和 `react-native-svg-transformer` 依赖。你可以通过运行以下命令来安装它们：

npm install react-native-svg react-native-svg-transformer

2. 在项目的根目录下创建一个名为 `metro.config.js` 的文件（如果已存在，请跳过此步骤）。

3. 在 `metro.config.js` 文件中添加以下内容：

module.exports = {
  transformer: {
    assetPlugins: ['react-native-svg-transformer'],
  },
};

4. 接下来，在你的组件中，使用 `react-native-svg` 中的 `<SvgUri>` 组件来加载本地 SVG 图像。首先，确保你的 SVG 图像位于项目的 `assets` 文件夹中。

import React from 'react';
import { View } from 'react-native';
import SvgUri from 'react-native-svg-uri';

const MyComponent = () => {
  return (
    <View>
      <SvgUri
        width={200}
        height={200}
        source={require('./assets/myImage.svg')}
      />
    </View>
  );
};

export default MyComponent;

在上面的示例中，我们使用 `require` 方法加载位于 `assets` 文件夹中的 `myImage.svg` 图像，并将其作为 `source` 属性传递给 `<SvgUri>` 组件。你可以根据自己的需要调整宽度和高度。

5. 确保你在重新启动 Metro Bundler 之前完成了以上步骤。你可以通过运行以下命令重新启动 Metro Bundler：

npx react-native start --reset-cache

这样，你就可以使用 `react-native-svg` 和 `react-native-svg-transformer` 成功加载和显示本地 SVG 图像了。

希望对你有所帮助！如有任何疑问，请随时提问。