Học React Native từ cơ bản đến nâng cao - Phần 9: Xây dựng App đọc tin tức đơn giản với React Native và 1 số chia sẻ cá nhân

I. Demo

Trong bài viết này tôi sẽ làm 1 demo để hướng dẫn cách sử dụng Boilerplate được đề cập trong Phần 8: Xây dựng Base Project (Boilerplate) cho React Native. Cho nên bài này tôi sẽ viết ngắn gọn để các bạn có thể bắt đầu đọc code ngay trong link dưới đây.

Github: https://github.com/oTranThanhNghia/SimpleAppReactNative1

$ git clone https://github.com/oTranThanhNghia/SimpleAppReactNative1.git

Apk giảm bớt chức năng thừa https://www.dropbox.com/s/ry1j3y3o1imijbl/NewsReactNative_2019_11_10.apk?dl=0

Đối với iOS các bạn phải tự build nhé vì không có tài khoản apple developer ($99/year)

Chú ý: Tôi đang dùng dịch vụ cung cấp api tin tức bản free nên các bạn bạn hãy vào https://newsapi.org để đăng ký tài khoản riêng cho mình để chạy ứng dụng nhé. Thay API_KEY tại dòng code:

Bảng giá như sau https://newsapi.org/pricing

1. Android

2. iOS

Trong phần demo ios có 1 lỗi tự động autoplay video. Về bug này tôi sẽ đẩy commit sau do hiện tại chưa có nhiều thời gian

3. Hướng dẫn xem full template

Nếu các bạn muốn xem đầy đủ những gì tôi đã viết trong project thì các bạn checkout về commit tôi bôi đỏ nhé

$ git checkout f286cbc

II. Giới thiệu

Thống nhất môi trường build:

  • Node: v10.15.0
  • React Native: 0.61.2
  • Xcode: 11.1
  • Android Studio: 3.4.1
  • CocoaPods: 1.8.4
  • OS: macOS Catalina

Giới thiệu các chức năng có trong demo:

III. Chia sẻ cá nhân

1. Vấn đề load image trong App

Nếu bạn nào đi từ native Android lên sẽ có thắc mắc tại sao tôi không dùng thư viện ngoài nào.

Lý do là core của <Image> đã sử dụng thư viện Fresco (https://frescolib.org/) rồi nên bạn không phải lo vấn đề load ảnh trên Android nữa; iOS thì lại càng không cần vì Facebook đã xử lý xong từ trước rồi.

2. Bàn về Crashlytics trong React Native

Tính đến thời điểm hiện tại thì service crashlytics của Bugsnag (https://www.bugsnag.com/) là tốt nhất. Vậy nên tôi muốn giới thiệu với các bạn Bugsnag để giúp quá trình fix bug được đơn giản nhất có thể.

Lý do chọn Bugsnag như sau: Bugsnag báo lỗi cụ thể dòng crash app trên cả Native code (java/kotlin hay objective-c/swift) và Javascript code (nhờ công cụ sourcemap)

Thế còn các services khác thì sao:

Ngoài ra bạn có thể xem thảo luận trong link dưới đây để biết thêm chi tiết nhé: https://www.reddit.com/r/reactnative/comments/a7kczu/status_of_react_native_crash_reporters_in_2019/

3. Các loại type-checking cho React Native

Mình chỉ có thể liệt kê 2 cái phổ biến nhất hiện nay là TypeScript và Flow

  • Flow do Facebook phát triển nên Flow support cho React Native khá tốt
  • TypeScript do Microsoft phát triển. Nếu ai đi từ OOP lên thì sử dụng TypeScript rất nhanh và phù hợp với những project lớn

4. Redux vs Mobx

Hiện tại đang có xu hướng mới sử dụng Mobx giúp cho developer mới dễ dàng sử dụng và tiếp cận hơn so với Redux. Dưới đây tôi có link so sánh cho các bạn https://www.educba.com/mobx-vs-redux/

III. Tài liệu tham khảo

  1. iOS main.jsbundle does not exists https://github.com/facebook/react-native/issues/25522

  2. jest-haste-map: Haste module naming collision: react-native https://github.com/react-native-community/async-storage/issues/169#issuecomment-538731342

  3. Splash: https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

https://github.com/crazycodeboy/react-native-splash-screen

  1. crashlytics: https://invertase.io/oss/react-native-firebase/v6/app/quick-start

https://invertase.io/oss/react-native-firebase/v6/crashlytics/quick-start

https://github.com/microsoft/appcenter/issues/75

https://www.bugsnag.com/platforms/react-native-error-reporting