한개 에러를 수정하려다 두가지 에러를 체험 함.
생각보다 해당 내용이 이슈가 있어 적어봅니다.
상황(1 - AOS 이슈)
시작은 MacOS환경에서 RN(0.72 / AOS, IOS)에서 react-navigation에 drawer stack 테스트중 발생.
- IOS 정상 구동
- 에뮬레이터는 구동되나, 앱빌드 실패.
찾아보니, drawer 사용시 react-native-reanimated가 사용되는데
해당 모듈이 이슈가 있음을 확인.
gradle폴더와 node_module폴더를 제거 및 재설치를해도 같음.
사용하고 있는 환경에 이슈가 있다고 생각됨.
확인해보니, 특정 RN버전 및 JDK, gradle등의 호환문제로 확인
상황(2 - RN 인스톨 최신버전 이슈)
최신버전에서 테스트 진행과정에서 생긴 이슈
인스톨
npx @react-native-community/cli@latest init AwesomeProject
에러 발생
이유 : Cli와 RN의 호환이 맞지않음.
react-native-community/cli 에 명시된 테이블을 보면
최신 버전의 Cli 설치시 react-native는 0.77버전을 요구함. 하지만, react-native는 0.76까지 밖에 없음.
하여 아래 버전으로 테스트 진행.
cli : 15.0.0 / react-native : 0.76
npx @react-native-community/cli@15.0.0 init myApp --version 0.76.0
npx react-native doctor 실행후 sdk 이슈 확인
최신버전에 맞는 SDK 설치(35)
테스트 진행 -> 실패.
여기서 만난 에러가 아래와 같다.
FAILURE: Build failed with an exception.
... settings.gradle' line: 2 [ERROR]
생각보다 많은 개발자들이 해당 이슈를 확인했고 개인마다 수정 방법을 공유하고 있었다.
상황2 해결 과정
gradle의 남아있는 캐시가 있을 것으로 생각됨.
아래 명령어 진행.
cd android - 안드로이드 폴더 진입
rm -rf .gradle - 기존 gradle 폴더 제거
./gradlew --stop
./gradlew clean - .gradle 재설치
cd ..
npx react-native run-android
결과 : 정상 구동
위 명령어로 window환경에서 RN 설치 및 구동을 확인했다.
.gradle폴더를 삭제하고, .gradlew clean 명령어를 사용해도 변화가 없었지만,
레딧에서 한 개발자가 --stop 명령어를 사용했고, 나 또한 정상적으로 동작했다.
레딧에서는 아래와 같은 순서였지만, clean 명령어 진행조차 안되기 때문에, 나는 --stop명령어 진행 후, clean명령어를 진행했다.
cd android
./gradlew clean
./gradlew --stop
이것으로 상황 2(RN 최신 버전에서 run-android 이슈는 해결됐다.)
상황1 해결
이제 react-navigation에 drawer는 상황2이 해결되고 공식 홈페이지의 가이드에 따라 진행했을때, 이슈 없이 구동되었다.
테스트 환경은 window이다.
MacOS 테스트
이제 자택에 PC에서 테스트 예정이다.
테스트 후, 글을 추가적으로 적겠다.
후기
아래 개발 환경에서 MacOS(M2) AOS, IOS에서 navigation drawer 정상 동작 확인 및 에뮬레이터 구동
개발환경
추가로 상황1,2를 테스트한 개발환경을 적는다.
//jdk
openjdk 17 2021-09-14
OpenJDK Runtime Environment (build 17+35-2724)
OpenJDK 64-Bit Server VM (build 17+35-2724, mixed mode, sharing)
//node
v21.1.0
//npm
10.8.1
//android sdk
35
// build.gradle
buildscript {
ext {
buildToolsVersion = "35.0.0"
minSdkVersion = 24
compileSdkVersion = 35
targetSdkVersion = 34
ndkVersion = "26.1.10909125"
kotlinVersion = "1.9.24"
}
repositories {
google()
mavenCentral()
}
dependencies {
classpath("com.android.tools.build:gradle")
classpath("com.facebook.react:react-native-gradle-plugin")
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
}
}
apply plugin: "com.facebook.react.rootproject"
//gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
// package.json
{
"name": "myApp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-navigation/drawer": "^7.1.1",
"@react-navigation/native": "^7.0.14",
"react": "18.3.1",
"react-native": "0.76.0",
"react-native-gesture-handler": "^2.21.2",
"react-native-reanimated": "^3.16.6",
"react-native-safe-area-context": "^5.1.0",
"react-native-screens": "^4.4.0"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "15.0.0-alpha.2",
"@react-native-community/cli-platform-android": "15.0.0-alpha.2",
"@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
"@react-native/babel-preset": "0.76.0",
"@react-native/eslint-config": "0.76.0",
"@react-native/metro-config": "0.76.0",
"@react-native/typescript-config": "0.76.0",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}
