15 Thư viện React native nên sử dụng trong ứng dụng của bạn

Danh sách các thư viện React native này không được sắp xếp ngẫu nhiên từ Internet. Đây là những thư viện mà bạn nên sử dụng trong các ứng dụng của bạn. Có thể có các lựa chọn thay thế cho các thư viện nhưng tôi đã chọn những điều này sau khi có một số lượng lớn các nghiên cứu và sử dụng chúng trong các ứng dụng của tôi.

Tôi cũng đưa ra một số ví dụ thực tế trực tiếp về cách tôi sử dụng các thư viện này. Vì vậy, đây là danh sách các thư viện React native.

React Native Animatable



Thư viện này thực sự tốt cho việc thêm nhanh các hình động và chuyển tiếp đơn giản vào ứng dụng React Native của bạn. Thư viện này có thể được sử dụng theo 2 cách – khai báo và bắt buộc.

Cách sử dụng khai báo - Đơn giản chỉ cần đề cập đến tên của một trong những hình ảnh động được xây dựng trước và hình ảnh đó sẽ được áp dụng ngay khi tải phần tử đó. Ví dụ: Tiêu đề phải trượt từ trái sang phải khi một trang được mở.

Cách sử dụng theo kiểu bắt buộc - Nếu bạn muốn làm bằng tay thì đây là phương pháp tuyệt vời. Ví dụ: Lung lay biểu tượng tim khi ai đó thích bài đăng.

Bạn cũng có thể xác định các hình động của riêng bạn! Đối với hình phức tạp, tôi thích sử dụng API động của React Native từ đầu.

Ví dụ thực tiễn



Kiểm tra gif dưới đây. Trang tiểu sử với các chuyển đổi đơn giản, hình ảnh tiểu sử có ảnh phóng to, chi tiết tiểu sử trượt bên trái. Cuối cùng, là một hoạt hình dao động nhỏ khi ai đó thích bài đăng.

React Native Push Notification

Thư viện này hỗ trợ rất tốt cho các thông báo đẩy cục bộ. Nó có các tính năng như thông báo lịch trình, nhắc lại thông báo dựa trên ngày, tuần, giờ... mà không có trong các thư viện khác.

Nếu ứng dụng của bạn có phương pháp tiếp cận ngoại tuyến và cần thông báo đẩy thì thư viện này là cách để thực hiện! Tôi đang sử dụng thư viện này trong ứng dụng 4cards của tôi - https://www.4cards.in

React Native FCM

Nếu ứng dụng của bạn cần nhận thông báo từ xa được gửi từ máy chủ bằng GCM hoặc FCM thì thư viện này là một trog những thứ đó!

Thư viện này cũng có hỗ trợ cho các thông báo địa phương với sự lập kế hoạch và hỗ trợ định kỳ. Vì vậy, nếu bạn cần cả thông báo từ xa và cục bộ thì hãy sử dụng nó.

React Native Hyperlink



Một Hyperlink đơn giản cho React native làm cho URL. Với hình thức liên kết mờ, email có thể nhấp. Nó cũng hỗ trợ tạo kiểu cho các liên kết. Chỉ cần tạo Component Text và để Hyperlink như một thành phần và thư viện sẽ giúp bạn xử lý phần còn lại.



React Native Sound

Khi mà bạn cần phát âm thanh hoặc âm nhạc trong ứng dụng của mình. Tôi sử dụng thư viện này để phát âm thanh ứng dụng và dùng chúng để ghi âm lại các câu trả lời (Đó là một ứng dụng Q n A giống như Quora)

Ví dụ thực tế

Xem thêm về video giới thiệu cho âm thanh ứng dụng gốc.
React Native loading spinner overlay

Một thành phần đơn giản nhưng rất hữu ích.Bạn có thể sử dụng điều này khi bạn muốn chặn người dùng thực hiện bất kỳ hành động nào khác trong khi một cái gì đó đang được xử lý. Thành phần này hoạt động tốt bằng cách xử lý nút quay lại cũng như trong Android. Ví dụ: Gửi một bài đăng
React Native Progress

Hiển thị tiến độ tải hoặc bất kỳ hành động nào khác là phần quan trọng trong một ứng dụng. Thư viện này giúp bạn dễ dàng thể hiện việc theo dõi tiến độ bằng cách hỗ trợ 5 thành phần khác nhau như thanh tiến trình Linear, vòng tròn, bánh...

Ví dụ thực tiễn Quiz timer bằng cách sử dụng React-native-progress



React Native Swiper

React Native swiper rất hữu ích cho việc triển khai giới thiệu ứng dụng, hình ảnh băng chuyền và hình ảnh.

Xem thêm về video giới thiệu cho bộ swiper gốc

React Native Share

Chia sẻ thành phần với tùy chỉnh giao diện người dùng. Nó cũng hỗ trợ chia sẻ tập tin.



React Native Photo View

Mỗi hình ảnh với hỗ trợ zoom, onload, phải tùy chỉnh kích cỡ để phù hợp và di chuyển chỉ số hỗ trợ. Thành phần này có vấn đề với hình ảnh có độ phân giải cao. Tất nhiên, đây không phải là phản hồi vấn đề cụ thể. Các sự cố bộ nhớ phổ biến trên Android khi có hình ảnh có độ phân giải cao.

Demo cho thành phần này là bản demo React-Native-Swiper ở trên.

React Native Image Picker

Một thư viện thiết yếu khác cho bất kỳ ứng dụng nào có tính năng tải lên hình ảnh hoặc xử lý hình ảnh. Nó hỗ trợ lựa chọn từ bộ sưu tập và ảnh chụp từ máy ảnh. Một tính năng hữu ích khác trong thư viện này tôi thích là tùy chọn chất lượng của hình ảnh theo ý cá nhân. Tính năng này giải quyết các sự cố bộ nhớ do hình ảnh có độ phân giải cao.



React Native Simple Store

Thư viện này chỉ là một bộ bao bọc xung quanh API AsyncStorage được xây dựng trong React Native nhưng thực sự hữu ích vì các tính năng của nó như hứa hẹn, chuỗi và siêu đơn giản API.

React Native Vector Icons

Đó là thành phần Icon tốt nhất. Nó đi kèm với 10 bộ icon các thành phần nút biểu tượng và cũng cho phép bạn dùng bộ Icon tùy chỉnh bằng cách sử dụng các bản đồ glyph, Fontello và các tập tin TTF.

Bộ Icon:

1.Entypo by Daniel Bruce (411 icons)

2.EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 70 icons)

3.FontAwesome by Dave Gandy (v4.7.0, 675 icons)

4.Foundation by ZURB, Inc. (v3.0, 283 icons)

5.Ionicons by Ben Sperry (v3.0.0, 859 icons)

6.MaterialIcons by Google, Inc. (v3.0.1, 932 icons)

7.MaterialCommunityIcons by MaterialDesignIcons.com (v2.0.46, 2046 icons)

8.Octicons by Github, Inc. (v5.0.1, 176 icons)

9.Zocial by Sam Collins (v1.0, 100 icons)

10.SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)
React Native Modalbox

Thư viện Modal này được xây dựng dựa trên thành phần Modal của React Native nhưng có nhiều tùy chỉnh và tính năng. Nó chỉ có tất cả các tính năng bạn cần để làm việc với Modals trong một ứng dụng.


1.React Native Router Flux

Điều hướng là một trong những mối quan tâm chính trong cộng đồng React Native bởi vì nó không có hệ thống định vị mặc định. Bất kể hệ thống định vị mà React Native gốc bản xuất hiện luôn có thay đổi đột ngột hoặc không ổn định.

Thư viện này đã giúp tôi thực hiện điều hướng nhanh chóng bằng một API khai báo rất đơn giản. Nó duy trì một ngăn xếp cho các tuyến đường và chuyển hướng đến bất kỳ cảnh trong ứng dụng đơn giản như gọi một chức năng.

Nó hỗ trợ chuyển hướng theo thẻ, ngăn kéo và Modals quá. Các modal có thể được định nghĩa là các cảnh để một Modal có thể được gọi từ bất kỳ cảnh nào.

Hầu hết các trình diễn ứng dụng ở trên sử dụng Phản ứng-bản-router-Flux cho hệ thống định vị.

Nếu bạn muốn xem trực tuyến, hãy tải xuống ứng dụng Helpy, nó được xây dựng bằng cách sử dụng phản ứng tự nhiên có sẵn trên cả Android và iOS. Helpy là một ứng dụng Q n A. Nói một cách đơn giản, đó là một sự thay thế dựa trên vị trí và đơn giản cho Quora.