Thực tiễn tốt nhất để tạo ứng dụng React Native - Phần 1

Hình 1: Hình ảnh trừu tượng với logo React

Nếu bạn chưa quen với thế giới React Native, có một số cạm bẫy mà bạn có thể muốn tránh trong khi trong một số trường hợp khác, bạn sẽ phải đưa ra lựa chọn trả trước có thể mà không biết chúng quan trọng như thế nào.

Dưới đây tôi đã tổng hợp một danh sách các thực tiễn tốt nhất từ ​​kinh nghiệm cá nhân của tôi, mà tôi hy vọng bạn sẽ thấy hữu ích :-)

Chỉ sử dụng Expo-Kit nếu bạn biết chính xác những gì bạn đang làm

Expo là một chuỗi công cụ mã nguồn mở và miễn phí dành cho React Native. Nó có lẽ là bộ tốt nhất hiện có cho các ứng dụng React Native, nhưng nó đi kèm với những hạn chế.

Sử dụng hội chợ triển lãm:

  • Nếu bạn muốn có một sân chơi nhanh và không xây dựng kho ứng dụng của bạn. Chỉ cần tạo một ứng dụng mới với gói trợ giúp tạo-phản ứng-bản địa.
  • Nếu bạn đã thực hiện nghiên cứu mở rộng về ứng dụng bạn sẽ xây dựng và tất cả các yêu cầu của ứng dụng có thể được đề cập từ các giải pháp được cung cấp của Expo.
  • Nếu bạn không có máy tính mac và bạn hoàn toàn muốn xây dựng ứng dụng cho iPhone. Nó là sự thay thế duy nhất trong việc xây dựng IPA thực thi.

Donith sử dụng hội chợ triển lãm:

  • Nếu bạn chưa quen với React Native và bạn nghĩ rằng đây là cách phải bắt đầu. Kiểm tra nếu nó đáp ứng nhu cầu của bạn đầu tiên.
  • Nếu bạn đang dự định sử dụng các gói RN của bên thứ ba có các mô đun gốc tùy chỉnh. Expo không hỗ trợ chức năng này và trong trường hợp đó, bạn sẽ phải đẩy Expo-Kit. Theo ý kiến ​​của tôi, nếu bạn định loại bỏ bất kỳ bộ dụng cụ nào, thì hãy sử dụng nó ngay từ đầu. Nó có thể sẽ khiến mọi thứ khó khăn hơn nếu bạn đã sử dụng bộ dụng cụ này.

Nhìn chung, tôi nghĩ rằng Expo là một công cụ tuyệt vời và tôi sử dụng Expo Snack để chia sẻ các đoạn mã RN. Nhưng ngay bây giờ nó chỉ có thể hỗ trợ để xây dựng một số loại ứng dụng nhất định.

Cách cấu trúc thư mục / tệp ứng dụng của bạn

Cấu trúc ứng dụng React Native của bạn không khác gì cấu trúc ứng dụng React của bạn. Vì vậy, nếu bạn quen thuộc với điều đó, bạn có thể gắn bó với logic hiện có của mình. Nhưng nếu bạn không, có thể bạn sẽ thấy logic hữu ích được đề xuất dưới đây:

Hình 2: Cấu trúc tệp / thư mục cho ứng dụng React Native
  • Thêm một thư mục trong thư mục gốc có tên là ứng dụng
  • Tạo thư mục bên trong ứng dụng:

tài sản - Tôi sử dụng tối đa 3 thư mục tại đây: phông chữ, biểu tượng và hình ảnh

các thành phần - Đây là nơi bạn sẽ đặt tất cả các thành phần React được chia sẻ của mình. Thông thường các thành phần này là những thành phần mà chúng tôi gọi là Giả dỏm, không có logic trạng thái và có thể dễ dàng sử dụng lại trên ứng dụng.

Lượt xem - Đây là những màn hình ứng dụng của chúng tôi, những màn hình mà chúng tôi điều hướng từ cái này sang cái khác. Đây cũng là các thành phần React, nhưng chúng là những thành phần mà chúng ta gọi là container, vì chúng chứa trạng thái riêng của chúng.

mô-đun - Có những phần không có phần xem tương ứng (JSX). Ví dụ điển hình cho điều đó là mô-đun màu (chứa tất cả các màu ứng dụng) và mô-đun utils (chứa các chức năng tiện ích đang được sử dụng lại).

dịch vụ - Đây là các chức năng bao bọc các lệnh gọi API.

i18n - Đây là các chuỗi dịch cho người dùng ngôn ngữ và ngôn ngữ khác nhau

Tất cả các ứng dụng yêu cầu một số loại cấu hình, vì vậy tôi thường tạo một tệp có tên config.js và đặt nó vào đó. Nếu tệp cấu hình đạt được nhiều dòng, thì chúng ta có thể tạo thư mục cấu hình và tách cấu hình trong tệp.

Nếu bạn có một thư viện quản lý nhà nước, bạn cũng sẽ cần các thư mục cho các cấu trúc của nó. Trong trường hợp của Redux, có thêm 2 thư mục được sử dụng, một cho các hành động và một cho các bộ giảm tốc. Nếu bạn không sử dụng gói bên ngoài và thích sử dụng API Bối cảnh React, bạn sẽ tạo các nhà cung cấp của riêng mình, có thể được đặt trong thư mục mô-đun hoặc trong thư mục mới gọi là nhà cung cấp.

Chọn một thư viện điều hướng theo nhu cầu của bạn ngay từ đầu

Thật không may, RN chưa cung cấp một giải pháp vững chắc hoặc thậm chí thay thế cho thành phần Navigator cũ, do đó chúng tôi hiện đang tập trung vào các giải pháp cộng đồng. Vì vậy, nếu bạn sắp bắt đầu một dự án, bạn muốn biết thư viện điều hướng nào sẽ sử dụng và liệu nó có phù hợp với bạn không.

Nhìn chung có hai loại thư viện điều hướng. Các trình điều hướng JavaScript và các trình điều hướng bản địa. Các JavaScript được viết bằng JavaScript trong khi các JavaScript được viết dưới dạng các mô đun gốc của nền tảng tương ứng (Android, iOS) và được bắc cầu tới các mô-đun JavaScript để được gọi trong mã. Cái trước dễ cài đặt hơn nhiều trong khi cái trước thì hiệu quả hơn nhiều. Dành thời gian để tìm ra cái nào bạn cần và sau đó chọn một trong số đó.

Spencer Carli đã thực hiện một công việc tuyệt vời xây dựng các lựa chọn Điều hướng hiện tại trong thế giới React Native trong bài viết này mà tôi khuyên bạn nên đọc. Mặc dù vậy, các tùy chọn chi phối là React Navigation như một giải pháp JavaScript và React Native Navigation là một giải pháp gốc.

Sử dụng thư viện trình bao bọc CSS-in-JS để thuận tiện

Trong React Native, CSS được viết bằng JavaScript. Nó có một cái gì đó mà chúng tôi không có sự lựa chọn về. Cá nhân thay vì sử dụng phương thức StyleSheet.create và mã CSS dưới dạng JavaScript thuần túy, tôi thích sử dụng thư viện Kiểu dáng. Các thành phần được tạo kiểu làm cho việc viết CSS cảm thấy trực quan trở lại và làm cho JSX trông có ngữ nghĩa hơn.

Gần đây, tôi đã viết một bài viết về lý do tại sao tôi thích sử dụng Các thành phần được tạo kiểu trong các ứng dụng React Native, để bạn có thể xem ở đó để biết thêm chi tiết.

Quyết định sớm cách bạn muốn ứng dụng của mình lên quy mô của thang điểm trên các thiết bị và kích cỡ màn hình khác nhau

Rất có thể, bạn đang phát triển một ứng dụng để biết thêm một kích thước thiết bị và kích thước màn hình. Bây giờ ở đây có hai tùy chọn về cách tiếp cận thiết kế / phát triển của bạn.

Bạn có thể chọn để có UI / UX khác nhau tùy thuộc vào kích thước màn hình. Đây có lẽ là tùy chọn tốt nhất cho hầu hết các loại ứng dụng nhưng đòi hỏi nhiều nỗ lực vì có nhiều màn hình được thiết kế và triển khai. Kích thước màn hình có thể được xác định thông qua API thứ nguyên. Ngoài ra, bạn có thể sử dụng gói bên thứ ba cung cấp một số tiện ích ngoài hộp, chẳng hạn như UI React Native Responsive UI.

Hoặc bạn có thể chọn có cùng UI / UX sẽ chia tỷ lệ cho tất cả các kích thước màn hình. Đây là tùy chọn tốt nhất khi bạn đang phát triển một trò chơi. Một lần nữa, bạn có thể sử dụng gói của bên thứ ba để đạt được điều đó, chẳng hạn như React Native Responsive Screen.

Tuyên bố miễn trừ trách nhiệm: Tôi là nhà sản xuất gói React Native Responsive Screen.

Tiếp cận hình ảnh động một cách thận trọng

Ảnh động rất quan trọng đối với các ứng dụng dành cho thiết bị di động, nhưng hiệu suất của React Native không phải là tốt nhất.

Để bảo vệ bản thân khỏi việc cung cấp kết quả xấu, bạn luôn cần kiểm tra hoạt ảnh trong thiết bị - trình giả lập không cung cấp phản hồi thích hợp. Bạn cũng phải sử dụng prop useNativeDriver (với giá trị được đặt thành true) bất cứ nơi nào bạn có thể, bởi vì nó sẽ giúp bạn đạt được hiệu suất tốt hơn.

Để biết thêm lời khuyên về cách đạt được hiệu suất tốt hơn, bạn hãy xem bài viết trước của tôi.

Hãy ghi nhớ

  1. React Native không có các phần tử DOM. Thay vào đó, chúng tôi đang xử lý các yếu tố bản địa.
  2. Về CSS:
  • Không phải tất cả các tài sản được hỗ trợ; ít nhất là chưa. Kiểm tra tài liệu để biết thêm thông tin: Xem Đạo cụ kiểu, Đạo cụ kiểu ảnh, Đạo cụ kiểu văn bản
  • Các thuộc tính tốc ký không hoạt động tốt, vì vậy luôn thích các thuộc tính cụ thể (ví dụ: lề dưới, lề trên, lề trái, lề phải thay vì lề)
  • Không phải tất cả các thuộc tính hỗ trợ giá trị phần trăm. Để đề cập đến một vài: lề, chiều rộng biên giới và bán kính đường viền. Và nếu ai đó cố gắng đặt giá trị phần trăm, RN sẽ bỏ qua hoàn toàn hoặc ứng dụng sẽ sập.
  • RN cung cấp hỗ trợ flex ra khỏi hộp. Tìm hiểu nó và sử dụng bất cứ khi nào bạn có thể. Nó là một đồng minh CSS tốt nhất của bạn!

Bạn nghĩ sao?

Bạn nghĩ gì về bài báo này? Những gì thực hành tốt nhất khác bạn có trong tâm trí? Đưa ra quan điểm và ý tưởng của bạn trong phần bình luận bên dưới.

Nếu bạn thích bài viết này, vui lòng nhấn nút vỗ tay đó để giúp người khác tìm thấy nó.

Về tôi

Xin chào, tôi lúng túng một kỹ sư phần mềm yêu thích web và hiện đang làm việc rất nhiều với React Native và React. Tôi là người đồng sáng lập công ty phần mềm Coded Lines nơi chúng tôi thực hiện các dự án di động và web từ đầu đến cuối, tập trung vào tiếp thị trong ứng dụng. Nếu nó có vẻ như những gì bạn đang tìm kiếm, xin vui lòng liên hệ với tôi ở đây: tasos.maroudas@codinglines.com. Cám ơn vì ghé qua :)

Giới thiệu

Cảm ơn

George Karboulonis để đọc bằng chứng