Front-End/React Native

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

현기 2022. 10. 21. 10:41

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 반복문을 돌도록 코드를 수정합니다.

 


 

 


 


참고 문헌 :