React Native 常用指令記錄及Bugs解決方案
啟動React Native debug伺服器: react-native start
建構測試用Android APK: npx react-native run-android
建構生產用Android APK並安裝在指定裝置: cd android; ./gradlew clean; cd ..; npx react-native run-android --variant=release --deviceId=XXXXXXXXXXX
建構aab bundle: ./gradlew bundleRelease
打開debug menu: adb shell input keyevent 82
查看已連接裝置或模擬器: adb devices
查看adb device ID: adb devices
安裝APK: adb -s <device-id> install ./android/app/build/outputs/apk/debug/app-debug.apk
安裝POD：pod install
解除POD：pod deintegrate
建構新的main.jsbundle：npx react-native bundle --platform ios --entry-file index.js --bundle-output ./ios/main.jsbundle --assets-dest ./ios/assets
建構release版本的main.jsbundle：react-native bundle --entry-file index.js --dev false --reset-cache --bundle-output main.jsbundle
(--dev false來避免'DevSettings' could not be found問題)
React native 初次建構測試 bug:
Android Studio Could not initialize classorg.codehaus.groovy.runtime.InvokerHelper
代表gradle與java版本不合，參考Gradle網頁 ，可使用sdkman轉用不同java版本（如java 11)，或到<project-path>/android/gradle/wrapper/gradle-wrapper.properties內改變gradle version的下載地址
註: react native目前不支援gradle 7或以上版本
mac版本需要用sudo npx react-native run-android來防止建構程序有權限問題
React native Bugs
圖片無法顯示：https://stackoverflow.com/questions/63949851/react-native-ios-not-showing-images-pods-issue
No matching function for call to 'RCTBridgeModuleNameForClass'：https://stackoverflow.com/questions/67287092/react-native-ios-sdk-no-matching-function-for-call-to-rctbridgemodulenamefor
CFBundleIdentifier does not exist on react-native：https://stackoverflow.com/questions/65580385/cfbundleidentifier-does-not-exist-on-react-native
Unable to prepare XYZ's iPhone for development:
更新Xcode來支援新iOS版本，https://stackoverflow.com/a/71274820
無法使用react-native run-ios來建構iOS應用,建構時出現錯誤：
phasescriptexecution [cp-user]\ generate\ specs (in target 'fbreactnativespec' from project 'pods')
解決方法：
需要在node_modules/react-native/scripts/find-node.sh中加入：
unset npm_config_prefix #add this line
unset PREFIX
在新增自訂字體時無法建構Android app，在建構時出現Duplicate resources android build error
解決方法：https://github.com/oblador/react-native-vector-icons/issues/1416#issuecomment-1042519618
若Android仍無法顯示字體，可以將字體複製到android/app/src/main/assets/fonts內
順帶記錄新增字體方法：https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
In-app review not shown in iOS device (dev mode):
https://stackoverflow.com/questions/45057452/why-the-skstorereviewcontroller-does-not-let-me-submit-a-review
Error: plugin with id 'maven' not found.
Solution: comment apply plugin: 'maven' in build.gradle
add maven in buildscript > repositories and repositories
buildscript {
...
repositories {
...
maven {url 'maven url'}
}
}
repositories {
...
maven {url 'maven url'}
}
Xcode Error:
"Communication with Apple failed. You are not allowed to perform this operation. Please check with one of your Team Admins, or, if you need further assistance, please contact Apple Developer Program Support, https://developer.apple.com/support"
"No profiles for '<bundle_id>' were found. Xcode couldn't find any iOS App Store provisioning profiles matching '<bundle_id'>."
若缺失的profile是M1 Mac的話，由於使用Rosetta會改變Device ID，在Application/Xcode中勾選使用Rosetta打開來啟用或停用rosetta即可解決。
React Native Keyevent 無法取得如Enter等部份非數字/字母的Keyevent
Android需要在MainApplication.java加入
@Override
public boolean dispatchKeyEvent(KeyEvent event) {
if (event.getKeyCode() == KeyEvent.KEYCODE_ENTER {
if (event.getAction() == KeyEvent.ACTION_UP){
KeyEventModule.getInstance().onKeyUpEvent(event.getKeyCode(), event);
return true;
}
}
return super.dispatchKeyEvent(event);
}
iOS需要在RNKeyEvent.m中修改getKeys
- (NSString *)getKeys {
return [NSString stringWithFormat:@"!,1,2,3,4,5,6,7,8,9,0,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,~,-,\r,%@,%@,%@,%@, ",UIKeyInputLeftArrow, UIKeyInputRightArrow, UIKeyInputUpArrow, UIKeyInputDownArrow]; // insert " "(space) after "%@,"
}
另外在KeyEvent.onKeyUpListener中的keyEventiOS只有pressedKey值返回，所以需要用String.fromCharCode(13)核對輸入鍵，如:
useEffect(() => {
KeyEvent.onKeyUpListener(keyEvent => {
if (keyEvent.pressedKey === String.fromCharCode(13)){
...
}
...
}
...
}, [])
Android: Changes are not tracked, unable determine incremental changes.
Solution1:
Clean Project by cd android; ./gradlew clean; cd ..;
Solution2:
Check if there is any invisible or redundant asset in android/app/src/main/assets
Error: resource android:attr/lStar not found
錯誤信息：
Execution failed for task ':<npm_package_name>:verifyReleaseResources'.
> A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action
> Android resource linking failed
ERROR:<path_to_gradle>/.gradle/caches/transforms-3/8ac0773c96f54a55e0dcd22123615930/transformed/core-1.7.0/res/values/values.xml:105:5-114:25: AAPT: error: resource android:attr/lStar not found.
將引起問題的node_module中的compileSdkVersion,targetSdkVersion設成31
如node_modules/<npm_package_name>/android/build.gradle：
android {
compileSdkVersion 31
...
defaultConfig {
...
targetSdkVersion 31
}
}
Error: The `pod' command exists in these Ruby versions: 2.7.5
Note: 無論更新ruby到甚麼版本都會顯示此錯誤
解決方法參考：https://qiita.com/TakaKun/items/80043d1fb437c625c81b
brew upgrade rbenv
brew upgrade ruby-build
rbenv install 2.4.1
rbenv global 2.4.1
gem install cocoapods
rbenv rehash
pod setup
pod install
更新xcode 15後 firebase出現An attribute list cannot appear here
解決方法參考：https://github.com/firebase/firebase-ios-sdk/issues/11840#issuecomment-1738875602
in Xcode, go to FIRFirestoreSettings.mm file, look for(go to pods, and you will see FIRbaseFirestore folder, open it);-
ABSL_CONST_INIT extern "C" const int64_t kFIRFirestoreCacheSizeUnlimited =
Settings::CacheSizeUnlimited;
轉為
extern "C" const int64_t kFIRFirestoreCacheSizeUnlimited =
Settings::CacheSizeUnlimited;
Command PhaseScriptExecution failed with a nonzero exit code
解決方法參考：https://github.com/facebook/react-native/issues/36762#issuecomment-1535910492
修改node_modules/react-native/scripts/find-node.sh
set +e