[React Native] 리액트 네이티브 안드로이드 실행 방법 (Open Android)

2022. 10. 21. 10:41·Front-End/React Native

QR코드를 Expo 앱에서 스캔하여

리액트 네이티브를 실행시킬 수도 있지만,

 

안드로이드 스튜디오를 설치하고

Virtual Device를 생성하면 컴퓨터에서도

모바일 안드로이드 화면을 확인할 수 있습니다.

개발하기 편리하겠죠? 😀

 


📝 설치 방법

 

 

⦁ Failed to resolve the Android SDK path.

안드로이드 스튜디오를 설치하지 않아서 발생하는 에러입니다.

리액트 네이티브의 open Android 명령어를 실행하려면, 

먼저 안드로이드 SDK을 설치하고, 가상 디바이스를 생성해야합니다.

 

https://developer.android.com/studio?gclid=Cj0KCQjw48OaBhDWARIsAMd966DMyOfxDlPjoseRaqwTyh4qSqyyum5xe8CW5CdZ7wl4Ox8iv6M3S_kaAuWREALw_wcB&gclsrc=aw.ds 

 

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

 

 

⦁ 설치 진행

 

✔ 다크 모드를 사용할지 등등 물어보는데

적당히 Next를 눌러 진행합니다.

마지막 설치 시간이 좀 오래 걸립니다.

 


📝 실행 하기

 

⦁ SDK 및 가상 디바이스 확인

✔ More Actions를 눌러보면 SDK, 가상 디바이스 매니저 창을 열 수 있습니다.

 

 

✔ 기본적으로 Pixel_3a 라는 디바이스가 설치되어 있었습니다.

    가상 디바이스를 따로 생성하지 않고 그대로 실행시켜 봤습니다.

 

⦁ React Native 터미널에 a 입력

✔ 원래 에러가 났던 open Android가 잘 실행이 됩니다. 🎉

    이제 React Native 작업물을 바로 컴퓨터에서 확인할 수 있습니다 !

 


 

⦁ 📑 null is not an object 에러 해결

더보기

 

이전 글에 만들었던 To Do 리스트를 실행시키니까 

ERROR TypeError: null is not an object (evaluating 'Object.keys(toDos)')

null is not an object 에러가 발생하네요.

To Do 리스트 오브젝트가 처음에는 null인데 반복문을 돌려고 하니 에러가 발생했습니다.

 

<ScrollView>
        { toDos &&
          Object.keys(toDos).map((key) => (
           		... 
          )}
</ScrollView>

위와 같이 toDos가 존재할 때만 map 반복문을 돌도록 코드를 수정합니다.

 


 

 


 


참고 문헌 : 

 

'Front-End > React Native' 카테고리의 다른 글

[React Native] 리액트 네이티브 링크 Linking 사용방법  (0) 2022.11.17
[React Native] 리액트 네이티브 라인 차트 만들기 (react-native-chart-kit)  (0) 2022.10.31
[React Native] 리액트 네이티브 코드 적용 안되는 이슈 해결 (캐시 초기화)  (2) 2022.10.26
[React Native] 리액트 네이티브 Navigation 사용하기 (라우팅)  (0) 2022.10.21
[React Native] 리액트 네이티브 To Do 앱 만들기 (AsyncStorage, Map)  (0) 2022.10.20
'Front-End/React Native' 카테고리의 다른 글
  • [React Native] 리액트 네이티브 라인 차트 만들기 (react-native-chart-kit)
  • [React Native] 리액트 네이티브 코드 적용 안되는 이슈 해결 (캐시 초기화)
  • [React Native] 리액트 네이티브 Navigation 사용하기 (라우팅)
  • [React Native] 리액트 네이티브 To Do 앱 만들기 (AsyncStorage, Map)
현기
현기
  • 현기
    현기의 개발블로그
    현기
  • 전체
    오늘
    어제
    • 분류 전체보기 (120)
      • Front-End (39)
        • Next (5)
        • React (8)
        • React Native (11)
        • Flutter (0)
        • Vue (1)
        • JSP (9)
        • HTML, CSS, JS (5)
      • Back-End (16)
        • Node.js (3)
        • Spring (8)
        • Flask (1)
        • AWS (4)
      • DB (5)
        • Oracle (4)
        • MySQL (1)
      • Python (7)
      • Java (27)
        • 자바 이론 (17)
        • 코딩테스트 연습 & 실습 (10)
      • 자료구조 & 알고리즘 (7)
        • 코딩테스트 (6)
        • 알고리즘 (1)
      • 블록체인 (0)
      • 프롬프트 엔지니어링 (0)
      • CS 지식 (5)
      • IT뉴스 (0)
      • 일상 (3)
      • etc (11)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    JSP
    파이썬
    자바 스프링
    React Native
    IS-A
    큐
    Express
    Java
    React Native Chart
    next-intl
    자바스크립트
    상속
    스택
    JDBC
    DI
    node.js
    티스토리챌린지
    react
    포스트맨
    리액트 네이티브
    오블완
    쓰레드
    react-native-chart-kit
    그리디
    REST API
    Spring
    서블릿
    Python
    자바
    오라클
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
현기
[React Native] 리액트 네이티브 안드로이드 실행 방법 (Open Android)
상단으로

티스토리툴바