Làm cách nào để hiển thị tệp SVG trên React Native?

Tôi muốn hiển thị các tệp svg (tôi có nhiều hình ảnh svg) nhưng điều tôi không thể tìm thấy cách hiển thị. Tôi đã cố gắng sử dụng các thành phần Hình ảnh và Sử dụng của react-native-svg nhưng chúng không hoạt động với điều đó. Và tôi đã cố gắng làm điều đó với cách gốc nhưng thực sự rất khó để chỉ hiển thị hình ảnh svg.

Mã ví dụ:

import Svg, {
  Use,
  Image,
} from 'react-native-svg';

<View>
  <Svg width="80" height="80">
     <Image href={require('./svg/1f604.svg')} />
  </SvgRn>
</View>

Ngoài ra, tôi biết phản ứng gốc về cơ bản không hỗ trợ svg nhưng tôi nghĩ ai đó đã khắc phục sự cố này bằng cách khó (có / không có phản ứng gốc-svg)

Tôi đã sử dụng giải pháp sau:

1. Chuyển đổi .svghình ảnh sang JSX với https://svg2jsx.herokuapp.com/
2. Chuyển đổi JSX react-native-svgthành component với https://svgr.now.sh/ (chọn hộp kiểm "React Native)

Tôi đã đăng một giải pháp khác ở đây Đây là cách tốt nhất để chèn biểu đồ vectơ (svg) vào ứng dụng gốc phản ứng , Cách tiếp cận này sử dụng phông chữ vectơ (từ svg) thay vì tệp svg. PS: Nó hoạt động tốt trên iOS và android, và bạn cũng có thể thay đổi màu sắc và kích thước của biểu tượng vector của mình.

Nếu bạn muốn chèn một svg trực tiếp vào ứng dụng của mình, bạn có thể thử sử dụng thư viện của bên thứ 3: react-native-svg. Với hơn 3k sao trên github, đó là một trong những cách tiếp cận tốt nhất.

• Tải về:
  • npm tôi react-native-svg
  • npm tôi react-native-svg-uri
• liên kết với bản địa:
  • liên kết react-native react-native-svg

Và đây là một mẫu:

import * as React from 'react';
import SvgUri from 'react-native-svg-uri';
import testSvg from './test.svg';
export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

Sau khi thử nhiều cách và thư viện, tôi quyết định tạo một phông chữ mới (với Glyphs hoặc hướng dẫn này ) và thêm các tệp SVG của tôi vào nó, sau đó sử dụng thành phần "Văn bản" với phông chữ tùy chỉnh của tôi.

Hy vọng điều này sẽ giúp bất cứ ai gặp vấn đề tương tự với SVG trong phản ứng gốc.

Cài đặt biến áp react-native-svg

npm tôi react-native-svg-biến áp --save-dev

Tôi đang sử dụng SVG như sau và nó hoạt động tốt

import LOGOSVG from "assets/svg/logo.svg"

trong kết xuất

<View>
  <LOGOSVG 
    width="100%"
    height="70%"
  />
</View>

Tôi đã từng gặp vấn đề tương tự. Tôi đang sử dụng giải pháp này mà tôi tìm thấy: React Native display SVG từ một tệp

Nó không hoàn hảo và hôm nay tôi sẽ xem lại vì nó hoạt động kém hơn rất nhiều trên Android.

Sử dụng https://github.com/kristerkari/react-native-svg-transformer

Trong gói này có đề cập rằng .svgcác tệp không được hỗ trợ trong React Native v0.57 trở xuống, vì vậy hãy sử dụng .svgxphần mở rộng cho các tệp svg.

Để sử dụng web hoặc react-native-web, https://www.npmjs.com/package/@svgr/webpack

Để hiển thị các tệp svg bằng cách sử dụng react-native-svg-uriphiên bản react-native 0.57 trở xuống, bạn cần thêm các tệp sau vào dự án gốc của mình

Lưu ý: thay đổi phần mở rộng svgthànhsvgx

bước 1: thêm tệp transformer.jsvào thư mục gốc của dự án

// file: transformer.js

const cleanupSvg = require('./cleanup-svg');

const upstreamTransformer = require("metro/src/transformer");

// const typescriptTransformer = require("react-native-typescript-transformer");
// const typescriptExtensions = ["ts", "tsx"];

const svgExtensions = ["svgx"]

// function cleanUpSvg(text) {
//   text = text.replace(/width="([#0-9]+)px"/gi, "");
//    text = text.replace(/height="([#0-9]+)px"/gi, "");
//    return text;
// }

function fixRenderingBugs(content) {
  // content = cleanUpSvg(content); // cleanupSvg removes width and height attributes from svg
  return "module.exports = `" + content + "`";
}


module.exports.transform = function ({ src, filename, options }) {
  // if (typescriptExtensions.some(ext => filename.endsWith("." + ext))) {
  //  return typescriptTransformer.transform({ src, filename, options })
  // }

  if (svgExtensions.some(ext => filename.endsWith("." + ext))) {
    return upstreamTransformer.transform({
      src: fixRenderingBugs(src),
      filename,
      options
    })
  }

  return upstreamTransformer.transform({ src, filename, options });
}

bước 2: thêm rn-cli.config.jsvào thư mục gốc của dự án

module.exports = {
    getTransformModulePath() {
      return require.resolve("./transformer");
    },
    getSourceExts() {
      return [/* "ts", "tsx", */ "svgx"];
    }
  };

Các giải pháp được đề cập ở trên cũng sẽ hoạt động trong các ứng dụng sản xuất ✅

Tôi đã thử tất cả các giải pháp trên và các giải pháp khác bên ngoài ngăn xếp và không có giải pháp nào phù hợp với tôi. cuối cùng, sau thời gian dài nghiên cứu, tôi đã tìm ra một giải pháp cho dự án triển lãm của mình.

Nếu bạn cần nó hoạt động trong hội chợ triển lãm, một cách giải quyết có thể là sử dụng https://react-svgr.com/playground/ và di chuyển dàn đạo cụ sang phần tử G thay vì gốc SVG như sau:

import * as React from 'react';
import Svg, { G, Path } from 'react-native-svg';

function SvgComponent(props) {
  return (
    <Svg viewBox="0 0 511 511">
      <G {...props}>
        <Path d="M131.5 96c-11.537 0-21.955 8.129-29.336 22.891C95.61 132 92 149.263 92 167.5s3.61 35.5 10.164 48.609C109.545 230.871 119.964 239 131.5 239s21.955-8.129 29.336-22.891C167.39 203 171 185.737 171 167.5s-3.61-35.5-10.164-48.609C153.455 104.129 143.037 96 131.5 96zm15.92 113.401C142.78 218.679 136.978 224 131.5 224s-11.28-5.321-15.919-14.599C110.048 198.334 107 183.453 107 167.5s3.047-30.834 8.581-41.901C120.22 116.321 126.022 111 131.5 111s11.28 5.321 15.919 14.599C152.953 136.666 156 151.547 156 167.5s-3.047 30.834-8.58 41.901z" />
        <Path d="M474.852 158.011c-1.263-40.427-10.58-78.216-26.555-107.262C430.298 18.023 405.865 0 379.5 0h-248c-26.365 0-50.798 18.023-68.797 50.749C45.484 82.057 36 123.52 36 167.5s9.483 85.443 26.703 116.751C80.702 316.977 105.135 335 131.5 335a57.57 57.57 0 005.867-.312 7.51 7.51 0 002.133.312h48a7.5 7.5 0 000-15h-16c10.686-8.524 20.436-20.547 28.797-35.749 4.423-8.041 8.331-16.756 11.703-26.007V503.5a7.501 7.501 0 0011.569 6.3l20.704-13.373 20.716 13.374a7.498 7.498 0 008.134 0l20.729-13.376 20.729 13.376a7.49 7.49 0 004.066 1.198c1.416 0 2.832-.4 4.07-1.2l20.699-13.372 20.726 13.374a7.5 7.5 0 008.133 0l20.732-13.377 20.738 13.377a7.5 7.5 0 008.126.003l20.783-13.385 20.783 13.385a7.5 7.5 0 0011.561-6.305v-344a7.377 7.377 0 00-.146-1.488zM187.154 277.023C171.911 304.737 152.146 320 131.5 320s-40.411-15.263-55.654-42.977C59.824 247.891 51 208.995 51 167.5s8.824-80.391 24.846-109.523C91.09 30.263 110.854 15 131.5 15s40.411 15.263 55.654 42.977C203.176 87.109 212 126.005 212 167.5s-8.824 80.391-24.846 109.523zm259.563 204.171a7.5 7.5 0 00-8.122 0l-20.78 13.383-20.742-13.38a7.5 7.5 0 00-8.131 0l-20.732 13.376-20.729-13.376a7.497 7.497 0 00-8.136.002l-20.699 13.373-20.727-13.375a7.498 7.498 0 00-8.133 0l-20.728 13.375-20.718-13.375a7.499 7.499 0 00-8.137.001L227 489.728V271h8.5a7.5 7.5 0 000-15H227v-96.5c0-.521-.054-1.03-.155-1.521-1.267-40.416-10.577-78.192-26.548-107.231C191.936 35.547 182.186 23.524 171.5 15h208c20.646 0 40.411 15.263 55.654 42.977C451.176 87.109 460 126.005 460 167.5V256h-.5a7.5 7.5 0 000 15h.5v218.749l-13.283-8.555z" />
        <Path d="M283.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM331.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM379.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM427.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15z" />
      </G>
    </Svg>
  );
}

export default function App() {
  return (
    <SvgComponent width="100%" height="100%" strokeWidth={5} stroke="black" />
  );
}

Lưu ý: Svg không hoạt động cho các phiên bản phát hành Android vì vậy không xem xét cho Android. Nó sẽ chỉ hoạt động cho Android ở chế độ gỡ lỗi. Nhưng nó hoạt động tốt cho ios.

Sử dụng https://github.com/vault-development/react-native-svg-uri

Tải về

npm install react-native-svg-uri --save
react-native link react-native-svg # not react-native-svg-uri

Sử dụng

import SvgUri from 'react-native-svg-uri';


<SvgUri source={require('./path_to_image/image.svg')} />

Tôi sử dụng hai plugin này,

1. [react-native-svg] https://github.com/react-native-community/react-native-svg )
2. [react-native-svg-MBA] https://github.com/kristerkari/react-native-svg-transformer )

Trước hết, bạn cần cài đặt plugin đó. Sau đó, bạn cần thay đổi metro.config.js của mình bằng mã này.

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

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

Để biết thêm chi tiết, bạn có thể truy cập liên kết này

• https://medium.com/game-development-stuff/how-to-import-svgs-on-react-native-dc76b56403ba
• https://medium.com/@majirosstefan/the-svgs-inside-react-native-0-61-5-and-storybook-566bcd43ba94

bạn có thể chuyển đổi bất kỳ SVG nào thành một thành phần và làm cho nó có thể tái sử dụng.

đây là câu trả lời của tôi cho cách dễ nhất mà bạn có thể làm

SVG thành thành phần

import React from 'react'
import SvgUri from 'react-native-svg-uri';

export default function Splash() {
  return (
    <View style={styles.container}>
      {/* provided the svg file is stored locally */}
      <SvgUri
        width="400"
        height="200"
        source={require('./logo.svg')}
      />
      {/* if the svg is online */}
      <SvgUri
        width="200"
        height="200"
        source={{ uri: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg' }}
      />

      <Text style={styles.logoText}>
        Text
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logoText: {
    fontSize: 50
  }
});

Tất cả những giải pháp này là hoàn toàn khủng khiếp. Chỉ cần chuyển đổi SVG của bạn thành PNG và sử dụng <Image/>thành phần vani . Thực tế là react-native vẫn không hỗ trợ hình ảnh SVG trong Imagethành phần là một trò đùa. Bạn không bao giờ nên cài đặt một thư viện bổ sung cho một nhiệm vụ đơn giản như vậy. Sử dụng https://svgtopng.com/