리액트 네이티브 (오류해결)

리액트 네이티브

리액트 네이티브는 스마트폰 선능을 고려해서 os네이티브로 제공되는 요소들을 사용해 UI를 구성한다.

안드로이드 개발 설정

• 안드로이드 스튜디오 설치
• SDK 설정
• 리액트 네이티브는 안드로이드 6.0 이상의 SDK가 설치되어있어야 한다.
• 안드로이드 개발자옵션 디버그 활성화 한 뒤 usb안드로이드 장치와 컴퓨터 연결
• 안드로이드 기기를 연결한 뒤 디버그를 할 수 있게 명령어 실행 adb

vscode

npm install -g react-native-cli

react-native init 만들어질프로젝트이름

필요한 리액트 네이티브 앱 개발 요소들 설치

안드로이드 스튜디오

1. 내가 프로젝트의 android에 들어가기

2. 우린 이버전의 sdk를 깔아야한다.

3. 

4. sdk 매니저에서 경로 확인 후 환경변수 설정

   

5. 

6. 애뮬레이터, 디바이스 연결하기

   

7. 애뮬레이터 api버전이 sdk버전하고 맞아야한다. api 29로 깔기

avd 에 들어가 애뮬레이터 실행 or 실제 안드로이드 연결

5. 실행하기

   react-native run-android

   sdk 버전이 맞아야한다.

6. vscode

7. 계속 오류가 난다.

> Task :app:processDebugMainManifest FAILED
11 actionable tasks: 3 executed, 8 up-to-date

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugMainManifest'.
> com.android.manifmerger.ManifestMerger2$MergeFailureException: java.io.FileNotFoundException: D:\workspace_react\saessak\android\app\build\intermediates\navigation_json\debug\navigation.json (������ ������ ã�� �� �����ϴ�)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 21s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugMainManifest'.
> com.android.manifmerger.ManifestMerger2$MergeFailureException: java.io.FileNotFoundException: D:\workspace_react\saessak\android\app\build\intermediates\navigation_json\debug\navigation.json (������ ������ ã�� �� �����ϴ�)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 21s

gradle문제인가 / 에뮬레이터도 새로 다시 깔아봄 / node.js도 다시깔아봄 >> 안됨

삽집 + 구글링 하다가 알아내서 성공했다

https://stackoverflow.com/questions/64333649/what-is-navigation-json-in-android-studio-4-1

참고

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.4.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 2m 32s
25 actionable tasks: 25 executed
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.saessak/.MainActivity }
PS D:\workspace_react\saessak> 

gradle-wrapper.properties 수정

distributionUrl=https\://services.gradle.org/distributions/gradle-6.4.1-all.zip

build.gradle 수정

   dependencies {
        classpath("com.android.tools.build:gradle:4.0.2")
    }

*애뮬레이터에서 오류가 난다면? *

react-native start

실행해보기

7. 성공

실시간 로딩

hot reloading 을 사용하기 위해서는 명령어를 입력 해야 한다.

adb devices //기기 이름 확인 
adb -s <device name> reverse tcp:8081 tcp:8081 

오류**

Each child in a list should have a unique "key" prop map

해결 전

    this.state.data.map(value => {
            return(
            <View style={styles.boardList}>
            ....
         )
     }

해결 후

    this.state.data.map((value,index) => {
            return(
            <View style={styles.boardList} key={index}>
            ....
         )
    }