Xin chào các bạn đang theo dõi bài viết này. Tôi sẽ liệt kê ra danh sách 10 Thư viện mà bạn nên biết trong react native và điều này sẽ giúp ích cho bạn rất nhiều và tôi đã và đang áp dụng chúng vào các ứng dụng trong công việc.
Top 10 này dựa vào sự lựa chọn của tôi và dĩ nhiên sẽ có những chức năng khác tốt hơn mà đáng lý ra tôi phải liệt kê vào đây. Có lẽ một ngày nào đó không xa, tôi cũng sẽ viết thêm một số bài viết liệt kê top 25 hoặc hơn thế nữa. Do đó, đừng bỏ lỡ và theo dõi những bài viết tiếp theo của tôi nhé!
Tôi sẽ cố gắng không đề cập đến những chức năng mà nó luôn được đề cập ở những bài nằm trong top 10 bài viết phổ biến nhất, như bản đồ react native là một nhân tố luôn được đề cập đến ở hầu hết các bài viết cùng chủ đề.
Danh sách dưới đây cũng sẽ không liệt kê theo thứ tự ưu tiên hay theo thứ tự từ cái tốt nhất đến cái kém nhất mà tôi chỉ đơn giản liệt kê chúng từ những gì mà tôi đang nghĩ và đang muốn viết về chúng thôi.
Victory native
Thư viện này là một sự lựa chọn hoàn hảo cho bất kỳ ai muốn sử dụng đồ thị trong react native. Chỉ có một yêu cầu duy nhất cho phương án lựa chọn này là bạn phải cài đặt Thư viện react-native-svg.
Khi Thư viện này làm việc trên nền tảng svg thì nó cực kỳ hiệu quả và chắc chắn rằng bạn sẽ không bị giảm sút về chất lượng cũng như hiệu suất liên quan đến ứng dụng trong khi đó điều này là nỗi lo lắng của nhiều người đang gặp phải.
Hơn nữa, Thư viện này có lượng tài liệu phong phú, tạo điều kiện thuận lợi cho việc học tập và ứng dụng.
Ảnh Victory Native:
https://formidable.com/open-source/victory/gallery
Tài liệu tham khảo:
https://formidable.com/open-source/victory/docs/native/
Modalize
Thư viện này áp dụng các Modals vào trong React Native siêu hiệu suất, rất trực quan và dễ áp dụng. bạn muốn áp dụng phương thức này thì nên chắc chắn cân nhắc việc sử dụng thư viện này vì nó có một số tài liệu và những ví dụ hữu ích trong hệ thống quản lý dự án và phiên bản code, giúp cho việc triển khai một cách dễ dàng.
Hệ thống quản lý dự án và phiên bản code của Modalize:
https://github.com/jeremybarbet/react-native-modalize
Tài liệu tham khảo:
https://jeremybarbet.github.io/react-native-modalize
Hình thức React Hook
Bạn chắc chắn đã hoặc sẽ phải xử lý các form lớn, yêu cầu tên, tuổi, email, mật khẩu, xác nhận mật khẩu, quốc gia, tiểu bang, vùng lân cận, v.v.
Vì mặc định bây giờ là sử dụng hook nên bạn sẽ có hàng tá dòng với ký tự useState, điều này làm cho mã rất lộn xộn và cũng làm giảm hiệu suất trên các thiết bị yếu hơn bằng cách gây ra việc hiển thị lặp đi lặp lại nhiều lần. Đó là lý do tại sao react hook xuất hiện, nó sẽ giải quyết vấn đề đó cho bạn và với mỗi ký tự được nhập, nó sẽ không hiển thị lặp lại như lúc trước nữa.
Nó cũng cực kỳ hữu ích và phù hợp trên hệ thống Yup.
Bất cứ khi nào bạn phải xử lý các form trong react native thì hãy nghĩ đến việc sử dụng chức năng này. Khi bạn đã tự làm quen được với nó, có thể bạn sẽ không muốn sử dụng thêm một ứng dụng nào khác để xử lý validation và form.
Hệ thống quản lý dự án và phiên bản code của React Hook:
https://github.com/react-hook-form/react-hook-form
Tài liệu tham khảo:
https://react-hook-form.com/get-started#ReactNative
Kích cỡ font chữ React Native
Trong React Native chúng ta xử lý các font chữ có giá trị tuyệt đối, chiều rộng, chiều cao và tỷ lệ phần trăm, mà điều này đôi khi có thể là vấn đề dẫn đến sự không tương thích với màn hình.
Với chức năng này, nó sẽ xử lý tốt hơn rất nhiều đối với việc sử dụng các giá trị định dạng nêu trên. Bởi vì nó sử dụng trên cơ sở DPI của màn hình khi áp dụng kích thước phông chữ. Từ Padding là một ví dụ điển hình:
padding: RFValue(20)
Nếu bạn sử dụng kết hợp với kiểu chữ, nó sẽ trông giống như thế này:
padding: ${RFValue(20)}px;
Sau khi biết đến chức năng này, tôi đã bắt đầu sử dụng nó cho hầu như tất cả các dự án của mình và nó cũng sẽ thật hữu ích cho bạn đó, hãy sử dụng thử nó đi.
Tài liệu tham khảo
https://github.com/heyman333/react-native-responsive-fontSize
Mã hóa SVG React Native
Ví dụ về mã hóa SVG
Mọi người đều biết rằng file có đuôi .svg thì nhẹ hơn file có đuôi png. Nhưng hầu như rất khó để sử dụng đuôi svg vào trong jsx hoặc tsx kết hợp lại với nhau. Với chức năng này tôi nghĩ nó sẽ giải quyết được các vấn đề vừa nêu đấy.
Với chức năng này, bạn sẽ có thể sử dụng đuôi svg vào trong jsx/tsx kết hợp với nhau, chỉ cần vượt qua được các tiêu chuẩn về chiều cao và chiều rộng thì phần còn lại nó sẽ giải quyết hết.
Việc của bạn chỉ cần chèn hình ảnh có đuôi svg vào là được. Nhưng hãy nhớ rằng nó cần phải vượt qua được các tiêu chuẩn như đã nêu trên.
Tài liệu tham khảo:
https://github.com/kristerkari/react-native-svg-transformer
Lottie React Native
Nếu bạn còn chưa biết Lottie là gì thì nên tìm hiểu đi nhé.Với việc tạo ra hiệu quả cao từ ứng dụng này thì ứng dụng mà bạn sắp cho ra mắt sẽ trông rất chuyên nghiệp đấy.
Hình ảnh động của chức năng này rất linh hoạt và hơn nữa nó cũng là một chức năng mà bạn có thể sử dụng miễn phí để tìm hình ảnh động lý tưởng cho ứng dụng của mình.
Hãy chắc chắn rằng bạn đã khám phá kĩ các danh mục animation và tham khảo tài liệu của họ.
Một khi bạn bắt đầu sử dụng nó, đôi lúc sẽ khó có thể không được đưa một số hoạt ảnh vào ứng dụng của mình!
File ảnh Lottie:
https://lottiefiles.com/featured
Tài liệu tham khảo:
https://github.com/lottie-react-native/lottie-react-native
Tin nhắn đẩy React Native
Ứng dụng này cho phép bạn đẩy tin nhắn theo những cách hiệu quả nhất. hơn nữa giới hạn tin nhắn miễn phí có số lượng cực kỳ nhiều và giá thành tương đối rẻ nếu bạn sử dụng vượt quá số lượng tin nhắn miễn phí. Nó cũng rất đơn giản để cài đặt bạn sẽ gần như không thể gặp rắc rối khi sử dụng nó
Tin nhắn đẩy React Native:
https://github.com/OneSignal/react-native-onesignal
Tài liệu tham khảo:
https://documentation.onesignal.com/docs/react-native-sdk-setup
RevenueCat
Chức năng rất hữu ích cho việc thanh toán định kỳ khi bạn mua ứng dụng, với chức năng có lượng thông tin lớn và nhiều tùy chọn sử dụng miễn phí, phiên bản trả phí cũng rất tốt nếu bạn muốn có thêm một chút chỉ số và thống kê cho ứng dụng của mình hoặc nhiều người dùng hơn để quản lý. Nó cũng được tích hợp để phù hợp khi bạn sử dụng trên cả phần mềm IOS hoặc Android.
Tài liệu tham khảo:
https://docs.revenuecat.com/docs/reactnative
React Native Shadow 2
Nếu bạn đã và đang sử dụng Shadow in react native và thấy rằng nó hoàn toàn không đơn giản như bạn nghĩ thì chức năng này sẽ làm bạn thay đổi suy nghĩ đấy. Nó rất dễ sử dụng và cho ra kết quả cực kỳ ấn tượng, dĩ nhiên sẽ không khiến bạn phải đau đầu khi sử dụng đâu nhé!
Tài liệu tham khảo:
https://github.com/SrBrahma/react-native-shadow-2
React Native Element Dropdown
Ứng dụng này không cần bản trình bày, Trong React native có dropdown tốt, Thư viện này nhằm đáp ứng yêu cầu hoàn hảo. Tôi đã sử dụng nó một vài lần và nó thật sự rất hữu ích đấy các bạn ạ, hãy trải nghiệm để biết được rằng nó còn có một số cách dễ dàng thực hiện nữa đấy,
Tài liệu tham khảo:
https://github.com/hoaphantn7604/react-native-element-dropdown
Đây là tất cả những gì mà tôi muốn gửi đến bạn!
Đây là danh sách 10 chức năng mà bạn nên biết đến. Tôi hy vọng bạn cũng thích nó.
Nếu có bất kỳ sự thắc mắc hay không hài lòng nào thì hãy để lại cho chúng tôi biết ý kiến ở phần bình luận. điều này sẽ giúp chúng tôi cải thiện chất lượng trong những bài viết tiếp theo nhé!
Hẹn gặp lại các bạn.
