Day 15 #100DaysOfCode
Hôm nay mình đi tìm hiểu về React Native, mình thấy rất là nhiều bạn đang lập trình app bằng React Native, nên mình cũng đi tìm hiểu cho biết chút ít về ngôn ngữ này, hiện tại trên trang https://reactnative.dev/ cũng đã hướng dẫn chúng ta sử dụng chúng rồi. Từ việc cài đặt nó trên PC và Mac, mình thì cũng đã trải nghiệm thử rồi, nên viết bài chia sẻ này lưu lại, khi nào quên thì xem lại cho nhớ ::)
Hiện tại mình build ra được 1 app bán hàng như thế này: thử nghiệm cho một ông bạn! : https://play.google.com/store/apps/details?id=com.trangtrixemayhoangtri&hl=vi&gl=US
Trên trang web đã hướng dẫn rất rõ, còn ở đây mình chia sẻ cách trải nghiệm của bản thân và thường dùng nên mình sẽ bỏ qua các bước cài đặt chi tiết vì nó dài.
# Install React Native on PC
Đầu tiên bạn cần cài đặt Node.js bạn lựa phiên bản mới nhất mà cài nhé: Download Nodejs
Tiếp theo bạn cần cài đặt Java SE Development Kit (JDK) để có thể cài đặt Android Studio sau khi download được file cài đặt JDK, bạn tiến hành cài đặt nó, tùy thuộc vào phiên bản bạn muốn cài nhé mình ở đây cài jdk-15.0.1, Sau khi bạn cài đặt xong sẽ được đường dẫn sau , C:\Program Files\Java\jdk-15.0.1
Ok, mọi thứ cũng ổn rồi, giờ bạn cần lên trang chủ tải android studio về thôi: Download Android Studio Sau khi cài đặt xong bạn cần thiếp lập môi trường để chạy, bạn có thể xem cách thiếp lập môi trường tại đây : Xem
Nếu mọi thứ ổn thỏa bạn có thể tạo project React Native rồi nhé. Bạn có thể xây dựng React Native thông qua CLI hoặc Expo nhé, thường thì mình Expo cho nhẹ và nhanh để test, khi nào ứng dụng ok, mình sẽ chuyển qua CLI
+ Tạo project bằng Expo : đồi hỏi bạn phải đăng ký tài khoản expo tại đây : Đăng ký Sau khi đăng ký bạn có thể tạo project như câu lệnh sau:
npm install -g expo-cli expo init BasicProject cd BasicProject npm start or expo start
Sau khi chạy bằng expo bạn sẽ được như hình dưới đây, bạn có thể test rên website, hoặc điện thoại iphone, android của bạn. Nếu bạn muốn test trên điện thoại bạn, bạn cần cài đặt app expo trên CH Play, App Store sao đó quét mã QR Code là được nhé
Sao khi ứng dụng của bạn hoàn thành, bạn có thể build nó lên expo nhé: expo build:android hoặc expo build:ios
+ Cài đặt React Native CLI: ở cách này nếu bạn dùng android studio thì cần phải cài đặt AVD , thiết lập thiết bị ảo để chạy ứng dụng nhé. Còn trong Mac thì có xcode rồi bạn chỉ cần tải đúng phiên bản cần dùng và run là được
npx react-native init BasicProject cd BasicProject npx react-native run-android
Về phần bên android thì dễ cài đặt và chạy ứng dụng, còn phần bên Mac thì hơi mệt xíu nhé
# Install React Native on Mac :
Giờ bạn cần vào trang này https://brew.sh/ sau đó bạn mở terminal macbook của bạn lên và chạy câu lệnh sau, để cài đặt brew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Bạn sẽ chờ xíu cho cài đặt xong, bạn tiến hành cài đặt Node and Watchman, thông qua brew
brew install node brew install watchman
Okay, nếu mọi thứ điều ổn thỏa, bạn tiến hành cài đặt Xcode trên Macbook của bạn, bạn thích build trên ios mấy thì lên kiếm xcode mà download về nhé, tùy thuộc vào phiên bản xcode mà nó hổ trợ trên ios mấy nhé, sao khi cài đặt xong, mở phần mềm Xcode lên vào mục Preferences -> Command Line Tools và chỉnh lại như hình dưới đây
Điều cần thiết nhất là bạn phải cài đặt cho bằng được thằng cocoapods,
sudo gem install cocoapods
Sau khi cài đặt xong các bước trên, thì bạn có thể tạo được project React Native rồi, cách tạo projec cũng giống như các bước trên thôi
npx react-native init BasicProject cd BasicProject cd ios && pod install && cd ../ && npx react-native run-ios
Nếu các bạn chạy ios bị lỗi thì chúng ta phải tìm sửa lỗi từng tí thôi, vì chạy react native trên mac có rất là nhiều lỗi,nhưng fix từ từ sẽ ra thôi.
Dưới đây là 1 danh sách chú thích trong khi mình làm ứng dụng, có note lại các lỗi và hướng dẫn mình gặp phải , cũng như các hướng dẫn về React Native cần xem cho biết, bạn nào chịu khó xem cho biết nhé
Hướng dẫn cài ReactNative Mở CMD chạy các l npm install -g expo-cli Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted Tạo project expo init BasicProject cd BasicProject npm start hoặc expo start hoặc npx react-native init AwesomeProject run avd cd C:\Users\Hoa\AppData\Local\Android\Sdk\emulator $ emulator -list-avds $ emulator -avd Pixel_3_XL_API_30 cài đặt npm install react-native-paper react-native link react-native-vector-icons https://github.com/oblador/react-native-vector-icons https://oblador.github.io/react-native-vector-icons/ https://medium.com/@vimniky/how-to-use-vector-icons-in-your-react-native-project-8212ac6a8f06 https://rossbulat.medium.com/working-with-app-state-and-event-listeners-in-react-native-ffa9bba8f6b7 https://stackoverflow.com/questions/54352970/react-native-ios-status-bar-background https://stackoverflow.com/questions/46680890/react-native-how-to-scroll-a-scrollview-to-a-given-location-after-navigation-f lỗi vector-icons trong ios https://github.com/oblador/react-native-vector-icons/issues/1173 https://github.com/oblador/react-native-vector-icons/issues/1173 https://www.youtube.com/watch?v=fVoEojORQyQ build app android C:\Program Files\Java\jdkx.x.x_x\bin. C:\Program Files\Java\jdk-15.0.1\bin $ keytool -genkeypair -v -keystore mykeystore.keystore -alias mykeystore -keyalg RSA -keysize 2048 -validity 10000 https://blog.tylerbuchea.com/react-native-publishing-an-android-app/ https://vntalking.com/debug-ung-dung-react-native.html https://stackoverflow.com/questions/61289461/java-lang-noclassdeffounderror-could-not-initialize-class-org-codehaus-groovy-v https://stackoverflow.com/questions/55441230/unable-to-load-script-make-sure-you-are-either-running-a-metro-server-or-that-yo These steps really help me: Step 1: Create a directory in android/app/src/main/assets Linux command: mkdir android/app/src/main/assets Step 2: Rename index.android.js (in root directory) to index.js (Maybe there is an index.js file in which case you do not need to rename it) then run the following command: react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res Step 3: Build your APK: react-native run-android Please use index.js in latest version. Enjoy :) https://stackoverflow.com/questions/44301539/react-native-generate-apk-and-ipa-using-expo https://docs.expo.io/distribution/building-standalone-apps/#1-install-expo-cli https://stackoverflow.com/questions/52427466/how-to-make-statusbar-transparent https://dev.to/danovity/how-to-make-a-simple-hero-banner-in-react-native-3el1 https://www.npmjs.com/package/react-native-shadow https://www.debuggr.io/react-update-unmounted-component/ https://stackoverflow.com/questions/35309385/how-do-you-hide-the-warnings-in-react-native-ios-simulator https://css-tricks.com/the-hooks-of-react-router/ https://stackoverflow.com/questions/43380260/draw-horizontal-rule-in-react-native https://medium.com/@ralph1786/using-hooks-to-dispatch-actions-to-redux-5572a571e2e0 https://www.youtube.com/watch?v=lJd4u23U0zQ https://www.codegrepper.com/code-examples/delphi/how+to+disable+all+warning+in+react+native https://changelogs.md/github/archriss/react-native-render-html/ https://medium.com/@KPS250/creating-image-slider-with-flatlist-in-react-native-1815d3793d99 https://stackoverflow.com/questions/34992122/full-screen-background-image-in-react-native-app https://stackoverflow.com/questions/32830046/renaming-a-react-native-project ---------------------- Install react-native on Mac os / ios /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" brew install node brew install watchman brew cleanup -d -v brew install cocoapods cd ios && pod install && cd ../ && react-native run-ios https://stackoverflow.com/questions/5499125/how-to-create-ipa-file-using-xcode https://stackoverflow.com/questions/20939568/error-error-installing-cocoapods-error-failed-to-build-gem-native-extension https://stackoverflow.com/questions/58546659/podfile-lock-missing-when-initial-react-native-run-ios https://www.decoide.org/react-native/docs/debugging.html https://github.com/facebook/react-native/issues/28503 https://aboutreact.com/react-native-vector-icons/ https://github.com/oblador/react-native-vector-icons/issues/1074 https://www.youtube.com/watch?v=Wb9yQUP04zg https://readybytes.in/blog/how-to-deploy-a-react-native-ios-app-on-the-app-store https://stackoverflow.com/questions/42091721/how-to-get-offline-bunduling-of-ios-in-react-native Do the below steps sudo xcode-select --switch /Applications/Xcode.app go to ios/ run 'pod install' or 'pod update' open ios/newproject.xcworkspace https://stackoverflow.com/questions/66019068/event2-event-config-h-file-not-found/66034412 https://stackoverflow.com/questions/20939568/error-error-installing-cocoapods-error-failed-to-build-gem-native-extension https://github.com/facebook/react-native/issues/30836 https://github.com/facebook/react-native/issues/30231#issuecomment-738674682 install app https://medium.com/mii-cybersec/another-way-install-ipa-file-537b35d78174 run android C:\Users\Hoa\AppData\Local\Android\Sdk\platform-tools cach chay ios xcrun instruments -s devices react-native run-ios --simulator=”iPhone 11 Pro Max” react-native run-ios --device "Kool's iPhone" react-native run-ios --device --udid 0412e2c2******51699 . https://stackoverflow.com/questions/42110496/how-to-build-ipa-application-for-react-native-ios https://github.com/ios-control/ios-deploy https://stackoverflow.com/questions/44160993/xcode-error-the-app-id-cannot-be-registered-to-your-development-team https://stackoverflow.com/questions/44062014/material-ui-cannot-resolve-module-fbjs-lib-emptyfunction-fbjs-lib-invarian push notification https://viblo.asia/p/fcm-server-push-notify-from-app-server-to-client-device-with-php-WkXRMpyaGba https://www.youtube.com/watch?v=PPP9zyEPaCw https://stackoverflow.com/questions/47194507/how-to-get-the-device-token-in-react-native https://www.youtube.com/watch?v=z6DEJXYQpP4 https://www.youtube.com/watch?v=Sx-KapT-_DU https://www.youtube.com/watch?v=dyAwv9HLS60 https://developers.connectycube.com/reactnative/push-notifications https://www.youtube.com/watch?v=bGvcTAiNSaM https://medium.com/alameda-dev/react-native-push-notifications-with-firebase-d23ed0dfb3ae https://github.com/uokesita/RNPushNotifications https://viblo.asia/p/push-notification-voi-firebase-cloud-messaging-trong-react-native-4dbZNppq5YM ios https://github.com/react-native-push-notification-ios/push-notification-ios/issues/106 // e.g. 1 PushNotificationIOS.requestPermissions(); PushNotificationIOS.addEventListener('register', (token) => { console.log("MyAPNSTOKEN", token); }); // e.g. 2 PushNotificationIOS.requestPermissions().then(() => { PushNotificationIOS.addEventListener('register', (token) => { console.log("MyAPNSTOKEN", token); }); }); https://stackoverflow.com/questions/56039612/react-native-firebase-messaging-gettoken-is-not-called-from-rnfirebasemes https://github.com/invertase/react-native-firebase/issues/4195 https://rnfirebase.io/app/usage https://stackoverflow.com/questions/54868611/how-to-get-sha-1-key-in-react-native-cli https://stackoverflow.com/questions/38169519/how-to-display-gif-in-react-native-android-app https://stackoverflow.com/questions/45876039/gif-image-not-showing-animation-in-react-native/52110208 https://stackoverflow.com/questions/39326508/fcm-setting-badge-in-onmessagereceived https://stackoverflow.com/questions/43494133/how-to-send-push-notifications-to-multiple-devices-using-php-script-using-fcm https://stackoverflow.com/questions/43494133/how-to-send-push-notifications-to-multiple-devices-using-php-script-using-fcm https://viblo.asia/p/react-native-push-notification-gAm5ywmAZdb https://stackoverflow.com/questions/65082545/remove-notification-after-a-certain-time-in-react-native-react-native-firebase https://rnfirebase.io/messaging/notifications#notifee---advanced-notifications https://rnfirebase.io/messaging/usage https://github.com/zo0r/react-native-push-notification/issues/1555 https://rnfirebase.io/messaging/notifications#notifee---advanced-notifications https://stackoverflow.com/questions/34990479/no-matching-client-found-for-package-name-google-analytics-multiple-productf https://rossbulat.medium.com/react-native-working-with-notification-badges-5e60138b83e8 https://stackoverflow.com/questions/41141139/react-native-js-hash-history-needs-a-dom Export APK android https://github.com/facebook/react-native/issues/22234 https://stackoverflow.com/questions/47084810/react-native-android-duplicate-file-error-when-generating-apk/52750886#52750886 https://reactnative.dev/docs/signed-apk-android https://github.com/facebook/react-native/issues/26245 https://github.com/meliorence/react-native-render-html/issues/134 https://www.npmjs.com/package/@native-html/iframe-plugin https://github.com/meliorence/react-native-render-html/issues/107 https://github.com/meliorence/react-native-render-html/issues/134