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