Làm việc với SVG trong React Native

18/05/2022 11:46

Scalable Vector Graphic (SVG) là một định dạng hình ảnh sử dụng đồ họa vector để hiển thị hình ảnh bạn nhìn thấy. Chúng hiện phổ biến trong số các nhà phát triển vì chúng mở rộng đến bất kỳ độ phân giải nào. Dưới đây là hướng dẫn làm việc với SVG trong React Native.

Có thể chỉnh sửa dễ dàng: Các tệp SVG có thể được tạo và chỉnh sửa bằng bất kỳ trình soạn thảo văn bản nào. Bạn cũng có thể thao tác các thuộc tính với CSS.
Kích thước tệp nhỏ: do bản chất của SVG, độ phân giải không ảnh hưởng đến kích thước tệp cho phép kích thước tệp nhỏ nhất khi so sánh với các đối tác dựa trên pixel
Thân thiện với SEO: vì định dạng ngôn ngữ đánh dấu XML nên SVG thân thiện với SEO vì bạn có thể thêm từ khóa và mô tả trực tiếp vào hình ảnh.
Chúng có thể được làm động: Chúng tôi đã nói rằng việc tùy chỉnh và chỉnh sửa các tệp SVG rất dễ dàng. Sau đó, chúng tôi có thể tạo hoạt ảnh cho chúng bằng CSS và JavaScript

Trong bài viết này, chúng ta sẽ xem xét các cách khác nhau để thao tác với ảnh SVG trong các ứng dụng React Native.

Table of Contents

Thiết lập một dự án React Native
Tạo SVG trong React Native
Thêm SVG bên ngoài vào các ứng dụng React Native

Thiết lập một dự án React Native

Chúng tôi sẽ sử dụng khuôn khổ Expo để khởi động ứng dụng React Native của chúng tôi. Đảm bảo rằng bạn có Node.js / npm trên máy của mình. Mở một thiết bị đầu cuối và chạy mã bên dưới để cài đặt expo-clitrên toàn cầu.

Sao chép

1npm install -global expo-cli

Sau khi cài đặt, hãy chạy đoạn mã bên dưới để tạo một dự án gốc phản ứng mới

Sao chép

expo install react-native-svg-tutorial

Lệnh này sẽ khởi chạy một lời nhắc tương tác để bạn chọn một mẫu. Chọn ô trống và nhấn phím enter / return để tiếp tục cài đặt.

Sau khi quá trình hoàn tất, hãy điều hướng đến thư mục gốc của thư mục dự án và chạy đoạn mã bên dưới để khởi động máy chủ phát triển triển lãm.

Sao chép

1expo start react-native-svg-tutorial

Bạn sẽ thấy một menu tương tác tương tự như ảnh chụp màn hình bên dưới.

Máy chủ nhà phát triển Expo cho phép bạn kiểm tra cục bộ ứng dụng của mình khi đang phát triển. Bạn sẽ cần một trình giả lập hoặc Ứng dụng Expo Go để chạy ứng dụng. (Lưu ý: việc cài đặt trình giả lập không được đề cập trong bài viết này.) Tuy nhiên, bạn có thể kiểm tra [cách cài đặt trình giả lập trong bài viết này để cài đặt các công cụ cần thiết.

Giả sử bạn đã cài đặt trình giả lập, hãy nhấn phím có liên quan áp dụng cho trình mô phỏng và nó sẽ chạy ứng dụng trên trình mô phỏng.

Tạo SVG trong React Native

Chúng tôi sẽ tạo một trình tải tùy chỉnh cho một ứng dụng. Để bắt đầu, chúng ta sẽ cần react-native-svg , một thư viện cung cấp hỗ trợ SVG cho các ứng dụng react-native. Mở một thiết bị đầu cuối và điều hướng đến thư mục gốc của dự án của bạn. Chạy đoạn mã dưới đây để cài đặt thư viện

Sao chép

expo install react-native-svg-tutorial

Sau khi cài đặt, hãy tạo một tệp có tên Loader.jstrong thư mục gốc và dán đoạn mã bên dưới vào tệp.

import * as React from "react";

import Svg, { Path } from "react-native-svg";

const Loader = (props) => (

  <Svg

    width={118}

    height={107}

    fill="none"

    xmlns="http://www.w3.org/2000/svg"

    {...props}

  >

    <Path

      d="M32.333 6C17.608 6 5.667 17.819 5.667 32.4c0 11.77 4.666 39.707 50.602 67.947a5.26 5.26 0 0 0 5.462 0c45.936-28.24 50.602-56.176 50.602-67.947 0-14.581-11.941-26.4-26.666-26.4C70.94 6 59 22 59 22S47.059 6 32.333 6Z"

      stroke="#F24E1E"

      strokeWidth={10.667}

      strokeLinecap="round"

      strokeLinejoin="round"

    />

  </Svg>

);

export default Loader;

Nếu bạn đã sử dụng hình ảnh SVG trên web, điều này sẽ trông quen thuộc. Sự khác biệt chính ở đây là chúng tôi đang sử dụng các thành phần được cung cấp bởi react-native-svgđể tạo hình ảnh SVG của chúng tôi thay vì sử dụng các phần tử HTML. Các react-native-svg thành phần sử dụng chữ hoa đầu câu trong việc đặt tên để phân biệt với các thành phần HTML, là chữ thường. Để hiển thị SVG của chúng tôi, hãy truy cập App.jstệp và sửa đổi nó để trông giống như mã bên dưới.

import { StatusBar } from "expo-status-bar";

import { StyleSheet, Text, View } from "react-native";

import Loader from "./Loader";




export default function App() {

  return (

    <View style={styles.container}>

      <Loader />

      <StatusBar style="auto" />

    </View>

  );

}




const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: "#fff",

    alignItems: "center",

    justifyContent: "center",

  },

});

Lưu và tải lại trình giả lập của bạn; bạn sẽ thấy một ảnh chụp màn hình tương tự như ảnh chụp màn hình bên dưới.

Chuyển đổi một hình ảnh SVG hiện có thành một thành phần React Native có thể là một việc vặt. May mắn thay, một công cụ mã nguồn mở có tên SVGR Playground cho phép bạn tạo một thành phần React Native từ SVG.

Nó cho phép bạn dán hình ảnh SVG ở bên trái và tạo thành phần React Native SVG ở bên phải để sao chép và sử dụng. Bạn có thể chơi với nó để xem nó hoạt động như thế nào.

Thêm SVG bên ngoài vào các ứng dụng React Native

Ưu điểm của việc tạo thành phần React Native SVG là nó có thể tùy chỉnh. Chúng ta có thể chuyển các đạo cụ và hoạt ảnh, như chúng ta sẽ thấy trong phần tiếp theo, nhưng đôi khi chúng ta chỉ muốn sử dụng hình ảnh SVG bên ngoài mà không tùy chỉnh nó.

Có hai cách để đạt được điều này. Thư react-native-svgviện có một SvgUrithành phần cho phép chúng ta tạo các thành phần SVG từ các nguồn bên ngoài. Tạo một tệp có tên SvgExternal.jsvà dán mã bên dưới

import * as React from "react";

import { SvgUri } from "react-native-svg";




const SvgExternal = (props) => (

  <SvgUri

    width={118}

    height={107}

    uri="https://placeholder.pics/svg/118x107/DEDEDE/555555/SVG"

    {...props}

  />

);

export default SvgExternal;

Nó cung cấp một urichỗ dựa mà chúng ta có thể chuyển một liên kết đến một trang web bên ngoài. Đi tới App.jstệp và sửa đổi mã để hiển thị SVG bên ngoài.

// previous code




import SvgExternal from "./SvgExternal";

export default function App() {

  return (

    <View style={styles.container}>

      <SvgExternal />

      <StatusBar style="auto" />

    </View>

  );

}




// previous code

Bây giờ bạn có thể mở trình giả lập của mình để xem các thay đổi.

Link bài viết: https://blog.openreplay.com/working-with-svgs-in-react-native

Làm việc với SVG trong React Native

Thiết lập một dự án React Native

Tạo SVG trong React Native

Thêm SVG bên ngoài vào các ứng dụng React Native

Tin tức cùng chủ đề