Các thư viện React Native tốt nhất để tận dụng các tính năng gốc

Cộng đồng React Native là một trong những cộng đồng mã nguồn mở gây ấn tượng sâu sắc nhất trên nền tảng web. Theo GitHub, kho React Native là một trong những kho được xếp hạng hàng đầu dựa trên số lượng người đóng góp. Các bạn có thể tìm thấy các mô-đun và thư viện lập trình của bên thứ ba cho hầu hết mọi thứ mà bạn muốn triển khai trong ứng dụng di động kế tiếp của mình.

Bạn nhất định sẽ gặp phải các vấn đề liên quan đến các gói không dùng nữa và không được sử dụng, đặc biệt là các gói ban đầu của React Native – hiển nhiên là như thế. Tuy nhiên, một chút trục trặc có thể chấp nhận được bởi việc duy trì thư viện lập trình React Native yêu cầu duy trì một project có thể phụ thuộc vào ít nhất ba ngôn ngữ.

Thư viện lập trình React Native UI mà mọi nhà phát triển thiết bị di động nên biết

Điều quan trọng là phải biết sử dụng thư viện lập trình nào để tạo trải nghiệm người dùng và nhà phát triển tốt nhất có thể. Trong hướng dẫn này, chúng tôi sẽ giới thiệu cho bạn 15 thư viện lập trình React Native UI mà tôi đã sử dụng trong hầu hết mọi ứng dụng React Native mà tôi đã trải nghiệm tính đến thời điểm hiện tại năm 2021.

Trong bài viết này, chúng tôi sẽ đề cập đến các thư viện lập trình React Native UI tốt nhất cho:

• Định dạng
• Điều hướng
• Màn hình Splash
• Biểu tượng ứng dụng
• Loading placeholders
• Xử lý và theo dõi lỗi
• Tìm nạp dữ liệu
• Biểu tượng
• Hình ảnh
• Các hình thức
• Thử nghiệm

Sau đó, chúng ta sẽ xem xét một số mẹo và phương pháp hay nhất để sử dụng các thư viện lập trình này và các thư viện lập trình React Native UI khác, bao gồm cả cách:

• Tạo mẫu React Native
• Nhận thông tin cập nhật về các thư viện mới
• Sử dụng TypeScript với React Native

Định dạng

Định dạng là một chủ đề rất được quan tâm trong cộng đồng React và cộng đồng JavaScript nói chung. Tôi đã sử dụng hầu hết tất cả các phương pháp CSS-in-JS để định dạng cho các ứng dụng React và React Native của mình. Tôi đã quyết định sử dụng Tailwind CSS cho web và Restyle cho React Native.

Restyle là một thư viện lập trình do Shopify phát triển với hệ thống thực thi để xây dựng các thành phần giao diện người dùng. Với Restyle, bạn có thể tạo ra một hệ thống thiết kế hoàn chỉnh bằng cách xác định màu sắc, khoảng cách, các biến thể và tạo nên các phần cho bạn dựa trên các thành phần cốt lõi của React Native và các tiện ích Restyle.

Tính năng tốt nhất của Restyle là buộc bạn chỉ sử dụng các cấu hình đã được khai báo trong chủ đề của mình, điều này giữ cho ứng dụng luôn clean và hướng dẫn coworkers  của bạn bằng cách giữ cho các lựa chọn của họ ở mức tối thiểu nhất có thể.

Restyle yêu cầu bạn trước tiên phải tạo một chủ đề phản ánh cấu hình hệ thống thiết kế (màu sắc, khoảng cách, điểm ngắt và các biến thể), như sau:

import { createTheme } from '@shopify/restyle'

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purplePrimary,
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  breakpoints: {
    phone: 0,
    tablet: 768,
  },
});

export type Theme = typeof theme;
export default theme;

Điều hướng

Nếu như được hỏi câu hỏi này hai năm về trước, tôi sẽ cảnh báo không nên sử dụng điều hướng React do một số thách thức về hiệu suất mà thay vào đó, bạn nên sử dụng điều hướng React , chẳng hạn như điều hướng React Native.

May mắn thay, cộng đồng điều hướng React, với sự trợ giúp từ Software Mansion, đã phát triển và tối ưu hóa ba trong số các thư viện lập trình được sử dụng nhiều nhất trong hệ sinh thái React Native: React Native Screens, React Native Gesture Handler và React Native Reanimated. Ba thư viện lập trình đó chính là bí mật phía sau sự cải thiện với hiệu suất vô cùng lớn mà các bạn sẽ nhận thấy bắt đầu từ phiên bản 4.

Ngày nay, React Navigation sẽ là lựa chọn đầu tiên mà bạn không cần phải suy nghĩ nhiều.

Để bắt đầu làm việc với điều hướng React, trước tiên bạn phải cài đặt tất cả các dependencies của nó:

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Bạn có thể sử dụng ba loại điều hướng phổ biến với điều hướng React: Stack, Tab và Drawer. Bạn cũng có thể kết hợp nhiều trình điều hướng và tạo một kiến ​​trúc ứng dụng phức tạp.

Dưới đây là một ví dụ đơn giản về trình điều hướng ngăn xếp:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Màn hình splash

Thêm màn hình splash vào ứng dụng di động của bạn là một công việc tẻ nhạt và cách tốt nhất để hoàn thành các công việc tẻ nhạt là tự động hóa chúng. React-native-bootsplash cho phép bạn tạo một màn hình splash lạ mắt bằng cách sử dụng CLI. Tất cả những gì bạn cần làm là cung cấp hình ảnh, màu nền và gói sẽ thực hiện công việc giúp bạn.

Tôi thích sử dụng react-native-bootsplash hơn hầu hết các gói phổ biến hiện này, react-native-splash-screen, bởi vì gói này giúp bạn ngăn nhìn thấy các lỗi màu đỏ nếu bạn gặp sự cố khi khởi động.

Lệnh sau tạo một màn hình splash trong react-native-bootsplash:

yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \
  --background-color=F5FCFF \
  --logo-width=100 \
  --assets-path=assets \
  --flavor=main

Biểu tượng ứng dụng

Đây là một phần khác mà chúng ta cần phải tự động hóa. Để tự động tạo biểu tượng ứng dụng, chúng tôi sẽ sử dụng một plugin có tên là React Native Make. Plugin này có sẵn thông qua React Native CLI và được thiết kế để giúp bạn tạo các biểu tượng ứng dụng cho nền tảng iOS và Android.

Để sử dụng react-native-make, bạn chỉ cần có phiên bản 1024 × 1024 trên biểu tượng ứng dụng và sẵn sàng tạo nội dung biểu tượng ứng dụng bằng các lệnh sau:

react-native set-icon --path path-to-image

Loading placeholders

Một trong những câu hỏi phổ biến nhất mà tôi nhận được về ứng dụng di động React Native là làm thế nào để tạo trải nghiệm tải tương tự như các ứng dụng như Facebook và YouTube.

Có nhiều giải pháp để tạo ra trải nghiệm như vậy, nhưng tôi khuyên bạn nên sử dụng gói trình tải nội dung phản ứng. Gói này dựa trên các thư viện react-native-svg và Reanimated, có vẻ như hoạt động rất trơn tru. Gói này cũng cung cấp một sân chơi để giúp bạn tạo trình giữ chỗ trong trình duyệt của mình.

Dưới đây là một ví dụ về trình giữ chỗ đang tải tương tự như trong ứng dụng Facebook:

import React from "react"
import ContentLoader, { Rect, Circle, Path } from "react-content-loader/native"

const MyLoader = (props) => (
  <ContentLoader 
    speed={2}
    width={400}
    height={460}
    viewBox="0 0 400 460"
    backgroundColor="#d1d1d1"
    foregroundColor="#c4c4c4"
    {...props}
  >
    <Circle cx="31" cy="31" r="15" /> 
    <Rect x="58" y="18" rx="2" ry="2" width="140" height="10" /> 
    <Rect x="58" y="34" rx="2" ry="2" width="140" height="10" /> 
    <Rect x="0" y="60" rx="2" ry="2" width="400" height="400" />
  </ContentLoader>
)

export default MyLoader

Xử lý và theo dõi lỗi

Tất cả chúng tôi đều mong muốn làm cho ứng dụng React Native của mình không có lỗi bằng cách sử dụng hệ thống đánh máy và tăng phạm vi thử nghiệm. Tuy nhiên, ngay cả với phạm vi kiểm tra cao, người dùng vẫn chắc chắn gặp phải và báo cáo lỗi.

Do đó, điều quan trọng là phải xử lý lỗi của bạn và cung cấp phản hồi cho người dùng bất cứ khi nào ứng dụng không hoạt động như mong đợi. react-native-exception-handler cung cấp một cách đơn giản để xử lý các lỗi gốc và JavaScript cũng như cung cấp phản hồi cho người dùng.

Để làm cho phản ứng-bản địa-ngoại lệ-xử lý hoạt động, bạn phải cài đặt và liên kết mô-đun. Tiếp theo, đăng ký trình xử lý toàn cầu của bạn cho JavaScript và các ngoại lệ gốc, như sau:

import { setJSExceptionHandler, setNativeExceptionHandler } from "react-native-exception-handler";

setJSExceptionHandler((error, isFatal) => {
  // This is your custom global error handler
  // You do stuff like show an error dialog
  // or hit google analytics to track crashes
  // or hit a custom api to inform the dev team.
});

const exceptionhandler = (exceptionString) => {
  // your exception handler code here
};
setNativeExceptionHandler(
  exceptionhandler,
  forceAppQuit,
  executeDefaultHandler
);

Bạn nên theo dõi các lỗi này bằng công cụ của bên thứ ba để thông báo cho bạn về các lỗi mà người dùng gặp phải trong ứng dụng của bạn để bạn sửa chúng trong các bản phát hành sau này.

Tìm nạp dữ liệu

Đề xuất của tôi trong phần này sẽ phụ thuộc vào việc triển khai back-end của bạn. Nếu bạn đang sử dụng API REST, truy vấn phản ứng là lựa chọn tốt nhất của bạn ở đây. Nhưng thay vào đó, nếu bạn đang sử dụng graphQL, bạn có thể sử dụng urql. Hai thư viện đó sẽ cung cấp cho bạn mọi thứ bạn cần để xử lý API trong ứng dụng của mình. Bạn sẽ được hưởng lợi từ rất nhiều tính năng độc đáo như bộ nhớ đệm, hỗ trợ ngoại tuyến, giao diện người dùng lạc quan, tìm nạp trước và hơn thế nữa.

Sau khi cài đặt truy vấn phản ứng, bạn có thể tạo móc nối của riêng mình để tìm nạp các tác vụ, chẳng hạn như:

import {useQuery} from 'react-query';
import {client} from './client';

const getTasks = async () => {
  const {data} = await client.get('/tasks');
  return data;
};

export function useTasks() {
  return useQuery('tasks', getTasks);
}
```
And use it inside your components to fetch tasks : 

```
export const Tasks = () => {
  const {isLoading, data} = useTasks();

  if (isLoading) {
    return <ActivityIndicator color="#000" />;
  }
  return (
    <FlatList
      ListHeaderComponent={() => <Header />}
      data={data || []}
      renderItem={({item}) => <TaskItem {...item} />}
      keyExtractor={(_, index) => `item-${index}`}
      showsHorizontalScrollIndicator={false}
    />
  );
};

Biểu tượng

Hầu hết các bài viết tôi đã xem về cách sử dụng biểu tượng trong React Native đều đề xuất sử dụng Biểu tượng vectơ trong React Native làm lựa chọn mặc định. Đúng là thư viện này có rất nhiều biểu tượng và phông chữ, tuy nhiên hiếm khi tôi sử dụng, nhóm của tôi đã tự tạo ra các phông chữ mới để đi kèm với các thiết kế tùy chỉnh trong biểu tượng của chúng tôi. Theo ý kiến ​​của tôi, việc tạo phông chữ tùy chỉnh với react-native-vector-icon sẽ mang lại trải nghiệm không tối ưu vì bạn cần tạo một phông chữ mới bất cứ khi nào bạn muốn thêm một biểu tượng mới.

Thay vào đó, nhóm của tôi bắt đầu sử dụng react-native-svg cho các biểu tượng của chúng tôi với gói SVGR tuyệt vời, có thể tạo thành phần React từ bất kỳ tệp SVG nào. Bạn thậm chí có thể xuất trực tiếp một thành phần React từ tệp Figma.

Dưới đây là một ví dụ đơn giản về biểu tượng SVG được tạo dưới dạng các thành phần React Native bằng cách sử dụng plugin SVGR Figma:

import * as React from "react"

function Icon(props) {
  return (
    <svg
      width={48}
      height={1}
      viewBox="0 0 48 1"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <title>{"Rectangle 5"}</title>
      <path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
    </svg>
  )
}

export default Icon

Hình ảnh

Nếu ứng dụng của bạn chủ yếu phụ thuộc vào hình ảnh, bạn sẽ nhận thấy một số vấn đề về hiệu suất, đặc biệt là với danh sách và chế độ xem cuộn.

Sử dụng FastImage, một thành phần hình ảnh của React Native hiệu quả, sẽ giúp bạn cải thiện ứng dụng của mình mà không cần mất quá nhiều công sức. Nó thay thế chính xác thành phần hình ảnh từ React Native cộng với một số tính năng tuyệt vời, chẳng hạn như bộ nhớ đệm, phần ưu tiên và tải lại.

Hình thức

Có một số giải pháp tuyệt vời để xử lý các biểu mẫu trong React Native, bao gồm Formik và React Hook Form.

Tôi đã từng sử dụng Formik, nhưng tôi đã bị cuốn hút vào React Hook Form kể từ khi tôi phát hiện ra nó. Theo tôi, đây là giải pháp tốt nhất để xử lý các dạng đơn giản và phức tạp trong React.

Các lợi ích khác của việc sử dụng React Hook Form bao gồm quản lý trạng thái, xác thực, quản lý lỗi và nhiều trường mảng.

Thử nghiệm

Nếu bạn đã làm việc với các thư viện thử nghiệm để kiểm tra các ứng dụng giao diện người dùng của mình, kiến ​​thức và kinh nghiệm của bạn sẽ có thể áp dụng cho việc thử nghiệm trong React Native. Thư viện thử nghiệm React Native hầu như có cùng một API.

Dưới đây là một thử nghiệm đơn vị bộ đếm đơn giản bằng cách sử dụng Thư viện lập trình thử nghiệm gốc React:

import "react-native";
import React from "react";
import { fireEvent, render } from "@testing-library/react-native";

it("renders correctly", () => {
  // render component
  const { getByText } = render(<Counter />);

  // get buttons and text elements
  const decrement = getByText(/decrement/i);
  const increment = getByText(/increment/i);
  const counterText = getByText(/Current count:/i);

  // Make sure you have the right values
  expect(counterText.props.children).toEqual(["Current count: ", 0]);
  // trigger an event
  fireEvent.press(increment);
  expect(counterText.props.children).toEqual(["Current count: ", 1]);
  fireEvent.press(decrement);
  expect(counterText.props.children).toEqual(["Current count: ", 0]);
});

Để kiểm tra hành vi ứng dụng của bạn một cách tự tin, tôi khuyên bạn nên viết các bài kiểm tra đầu cuối bằng cách sử dụng thư viện Detox từ Wix.

Mẹo và các phương pháp hay nhất để sử dụng thư viện React Native UI

Dưới đây là một số mẹo bổ sung để giúp bạn tận dụng tối đa các thư viện React Native được trình bày chi tiết ở trên.

Tạo mẫu React Native

Nếu bạn muốn sử dụng tất cả các thư viện lập trình này trong các dự án React Native sắp tới của mình, có thể bạn nên dành thời gian để tạo một mẫu đơn giản để có thể dễ dàng bắt đầu một dự án mới.

Gần đây, chúng tôi đã tạo một mẫu cho nhóm di động của mình để bắt đầu các dự án mới với tất cả các thư viện nói trên. Đây là nếu bạn muốn sử dụng nó:

npx react-native init MyApp --template https://github.com/obytes/react-native-template-obytes

Nhận thông tin cập nhật về các thư viện mới

Một trong những cách hiệu quả nhất để cập nhật về các thư viện lập trình mới và các phương pháp hay nhất là theo dõi các dự án mã nguồn mở. Tôi muốn kiểm tra tệp package.json cho mọi dự án React Native được chia sẻ trên mạng của tôi. Bất cứ khi nào tôi tìm thấy một thư viện mới, tôi đều tìm kiếm nó để tìm hiểu thêm.

Ngoài ra, hãy đảm bảo theo dõi native topic phản ứng trên trang khám phá GitHub. Bạn sẽ nhận được rất nhiều cuộc thảo luận và dự án React Native.

Sử dụng TypeScript với React Native

Tôi đã bắt đầu sử dụng TypeScript làm ngôn ngữ chính cho các dự án React Native cách đây khoảng một năm rưỡi và tôi ước mình đã làm như vậy sớm hơn. Sử dụng TypeScript giúp bạn cải thiện chất lượng mã của mình và trải nghiệm của nhà phát triển vì nó giúp bạn ngăn lỗi khi nhập và cải thiện chức năng tự động hoàn thành.

Điều quan trọng cần lưu ý là TypeScript chỉ là một tập hợp tối ưu của JavaScript với tính năng nhập tĩnh tùy chọn. Nó không yêu cầu bạn học một ngôn ngữ hoàn toàn mới.

Kết luận

Tôi hy vọng bạn sẽ nhận thấy những hướng dẫn React Native này thú vị, bổ ích và giải trí. Chúng tôi đã thảo luận về lợi ích của việc sử dụng thư viện React Native để tận dụng các native features trong ứng dụng dành cho thiết bị di động của bạn, các công cụ cụ thể được đề xuất để giúp bạn styling, gỡ lỗi, tìm nạp dữ liệu và nhiều hơn thế nữa, đồng thời nêu ra một số mẹo và phương pháp hay nhất để giúp bạn tận dụng tối đa Thư viện React Native.

LogRocket: Khả năng hiển thị đầy đủ vào các ứng dụng web của bạn

LogRocket là một giải pháp giám sát ứng dụng giao diện người dùng cho phép bạn phát lại các sự cố như thể chúng đã xảy ra trong trình duyệt của riêng bạn. Thay vì đoán lý do tại sao lỗi xảy ra hoặc yêu cầu người dùng cung cấp ảnh chụp màn hình và kết xuất nhật ký, LogRocket cho phép bạn phát lại phiên để nhanh chóng hiểu được điều gì đã xảy ra. Nó hoạt động triệt để với mọi ứng dụng, bất kể khuôn khổ và có các plugin để ghi lại ngữ cảnh bổ sung từ Redux, Vuex và @ ngrx / store.

Bên cạnh việc ghi nhật ký các hành động và trạng thái của Redux, LogRocket ghi lại nhật ký bảng điều khiển, lỗi JavaScript, dấu vết, yêu cầu / phản hồi mạng với tiêu đề + nội dung, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Nó cũng tạo công cụ cho DOM để ghi lại HTML và CSS trên trang, tạo lại các video pixel hoàn hảo của ngay cả những ứng dụng một trang phức tạp nhất.

Nguồn: https://blog.logrocket.com/the-best-react-native-libraries-for-leveraging-native-features/