Roopretelcham

https://stackoverflow.com/questions/71836843/upgraded-react-native-version

android > settings.gradle 내용 변경

rootProject.name = 'my_app'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../node_modules/react-native-gradle-plugin')

if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
    include(":ReactAndroid")
    project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
}

package.json

{
  "name": "my_app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android-d": "react-native run-android --variant=debug",
    "android": "react-native run-android --variant=release",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "build-android": "cd ./android && ./gradlew app:bundleRelease --stacktrace",
    "build": "cd ./android && ./gradlew assembleRelease",
    "build-debug": "cd ./android && ./gradlew assembleDebug",
    "bundle": "cd ./android && ./gradlew app:bundleRelease",
    "clean": "cd ./android && ./gradlew clean",
    "devtools": "react-devtool"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.14",
    "@react-native-firebase/app": "^14.11.0",
    "@react-native-firebase/dynamic-links": "^14.11.0",
    "@react-native-firebase/messaging": "^14.11.0",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-webview": "^11.22.2",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-send-intent": "^1.3.0",
    "react-router-dom": "^6.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

이 방법으로 꼭 해결된다기보다 해볼 수 있는 것들

1. Podfile이 잘못되었는지 확인

: 잘못된 프로젝트 타겟 네임 수정하거나 주석처리

#target 'react_app-tvOS' do
  # Pods for react_app-tvOS

#  target 'react_app-tvOSTests' do
#    inherit! :search_paths
 
  ### Pods for testing
  
  #end

2. 리액트 네이티브 CLI 전역 제거

npm uninstall -g react-native-cli

3. 특정 환경변수 제거

 unset NODE_EXTRA_CA_CERTS

4. cocopods 파일 제거

rm -rf ~/.cocoapods/repos/trunk/\n

5. m1 mac에서 pod install하면 ffi 에러날 시

(...) tried: '/opt/homebrew/lib/ruby/gems/3.1.0/gems/ffi-1.15.5/lib/ffi_c.bundle' (mach-o file, but is an incompatible architecture (have 'x86_64', need 'arm64e')) - /opt/homebrew/lib/ruby/gems/3.1.0/gems/ffi-1.15.5/lib/ffi_c.bundle (LoadError)

( ... )

- 기존 패키지 제거하고 재설치

brew uninstall --ignore-dependencies ruby
sudo gem uninstall cocoapods
sudo gem uninstall cocoapods-core
sudo gem uninstall cocoapods-downloader

6. 저장소 업데이트하고 다시 install

pod repo update

pod install

7. Podfile

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'
install! 'cocoapods', :deterministic_uuids => false

target 'reactApp' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'reactAppTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

8. requireNativeComponent: "RNCWebView" was not found in the UIManager 에러 날 시

-> 리액티 네이티브, 웹뷰 패키지 설치 확인 후 npm i

 "react": "18.0.0",
    "react-native": "0.69.0",
    "react-native-webview": "11.22.3"

-> pod install 명령어를 vs code 터미널이 아닌 iTerm을 사용해 입력

9. target error 시

[!] CocoaPods could not find compatible versions for pod "React-RCTSettings":
  In Podfile:
    React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)

Specs satisfying the `React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)` dependency were found, but they required a higher minimum deployment target.

위와 같은 오류가 나면 Podfile의 타겟을 올린다.

platform :ios, '12.4'

이런저런 과정들을 수행했는데도 제대로 pod install 이나 빌드, 앱 실행이 잘 안된다면 package, package-lock.json 의존성을 잘 살펴보자. 필요한 의존성 패키지가 설치되지 않아서일 가능성이 있다.

(...)
 "node_modules/@react-navigation/stack": {
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.2.1.tgz",
      "integrity": "sha512-JI7boxtPAMCBXi4VJHVEq61jLVHFW5f3npvbndS+XfOsv7Gf0f91HOVJ28DS5c2Fn4+CO4AByjUozzlN296X+A==",
      "dependencies": {
        "@react-navigation/elements": "^1.3.3",
        "color": "^3.1.3",
        "warn-once": "^0.1.0"
      },
      "peerDependencies": {
        "@react-navigation/native": "^6.0.0",
        "react": "*",
        "react-native": "*",
        "react-native-gesture-handler": ">= 1.0.0",
        "react-native-safe-area-context": ">= 3.0.0",
        "react-native-screens": ">= 3.0.0"
      }
(...)

리액트 네이티브 개발을 하려는데 빌드하려고보니 최신 안드로이드 그래들은 jdk11을 요구한다.

그래서 openJDK를 설치하여 환경 변수를 설정하고 새로 빌드하니 해결되었다.

1. brew사용한 설치 

brew install adoptopenjdk11 --cask

2. 자바홈 확인

/usr/libexec/java_home -V

Matching Java Virtual Machines (2):
    11.0.11 (x86_64) "AdoptOpenJDK" - "AdoptOpenJDK 11" /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home
    1.8.0_312 (arm64) "Azul Systems, Inc." - "Zulu 8.58.0.13" /Library/Java/JavaVirtualMachines/zulu-8.jdk/Contents/Home
/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home

3. 환경변수 편집 ( zshrc를 수정해도 된다 )

vi ~/.bash_profile

editor 열리면 G 입력으로 맨끝줄 이동하여 아래 코드 추가

export JAVA_HOME="/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home"

저장 후 (:wq)  환경변수 적용

source ~/.bash_profile

4. 변경된 자바 버전 확인

java -version

5. 안드로이드 그래들 JDK 버전 변경 ( mac 기준 cmd + , )

자식창은 닫고 부모창의 경로를 이동하는 방법이다. (vue에서도 적용가능)

opener.location.replace("https://123.co.kr/test/");
window.close();