React Native 常用指令記錄及Bugs解決方案

React Native Dec 26, 2022

啟動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);
  }

參考來源:https://stackoverflow.com/questions/43361599/react-native-catch-volume-buttons-press-not-for-volume-adjusting

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

標籤