React原生svg android

问题 (Problem)

How to display SVG in a react native project for android production release using react-native-svg-uri?

如何使用react-native-svg-uri在Android生产发行版的React Native项目中显示SVG？

解： (Solution:)

You have worked hard on a project which uses SVG. All worked fine until you build a production release on Android. Suddenly all your SVG disappear and you are a bit lost. Here is how would you fix it:

您已经在使用SVG的项目上努力工作。 一切正常，直到您在Android上构建正式版为止。 突然，您所有的SVG消失了，您有点迷路了。 这是解决方法：

We need to create a wrapper component which returns SVG object based on the platform because react-native-svg-uri worked fine on iOS but having an issue with the production release of Android. More details here.

我们需要创建一个基于平台返回SVG对象的包装器组件，因为react-native-svg-uri在iOS上运行良好，但Android的生产版本存在问题。 更多细节在这里 。

Create a new react-native component. Name it Svg.js and update it with following code

创建一个新的本机组件。 将其命名为Svg.js并使用以下代码对其进行更新

import React from 'react';
import { Platform } from 'react-native'
import SvgUri from 'react-native-svg-uri';
export default({ width, height, source, fill }) => Platform.select({
ios: () => <SvgUri width={width || 24} height={height || 24} source={source} fill={fill} />,
android: () => { const SVG = source; return <SVG width={width || 24} height={height || 24} fill={fill} /> },
})();

This will return SVG based on your platform. So on iOS, it will return SvgUri but on Android, it will return the SVG file itself.

这将根据您的平台返回SVG。 因此，在iOS上，它将返回SvgUri，但在Android上，它将返回SVG文件本身。

Now let's create another js file that will work as an image library for the app. Please create a file, imageLibrary.js, and update it with the following code:

现在，让我们创建另一个js文件，该文件将用作该应用程序的图像库。 请创建一个文件imageLibrary.js，并使用以下代码对其进行更新：

import Home from './home.svg';
module.exports = {
  Home: Home
}

We are importing our SVG here and then exporting back so it can be available anywhere in our project.

我们将在这里导入SVG，然后将其导出，以便可以在项目中的任何位置使用。

Now we need to install an npm package react-native-svg-transformer and update metro-config.js as below:

现在我们需要安装一个npm包react-native-svg-transformer并更新metro-config.js，如下所示：

const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

Finally, use the component like this

最后，使用这样的组件

import React, { Component } from 'react';
import { View, } from 'react-native';
import SvgUri from './Svg';
import { Home } from './imageManager';
export default () => <View style={{ backgroundColor: '#000000', flex: 1 }}>
    <SvgUri fill={'#FF0000'} width={'24'} height={'24'} source={Home} />
</View>

This will show your SVG in android production.

这将在android生产中显示您的SVG。

I hope this will help you by sorting out your SVG issue in android production. Please let me know if you have any questions or if you need help with other issues.

希望这对您在android生产中解决SVG问题有帮助。 如果您有任何疑问或在其他问题上需要帮助，请告诉我。

Good Luck.

祝好运。

翻译自: https://medium.com/swlh/react-native-svg-android-e60d4aab1b42