웹/Node.js & React.js

[React] 안드로이드로 react-native 연결하고 카메라 띄우기

팽팽 2022. 4. 26. 13:21

먼저 환경 변수 설정을 해주자 

sdk가 위치한 곳을 ANDROID_HOME으로 정하고 path에 platfrom-tools도 환경변수 설정해둠

환경 변수가 잘 설정되면 cmd창에서 잘 나온다.

핸드폰을 노트북에 연결하고 adb devices 명령어로 잘 연결됐는지 확인하고

adb reverse 로 기기의 포트를 8081로 변경해주자

 

 

VS code 터미널 실행

npm install --save react-native-camera
npm install --save @react-native-community/cameraroll

 

자동으로 config 코드 추가해주기

react-native link @react-native-community/cameraroll && npx pod-install

터미널에서 실행하니까 오류뜸

command prompt 창에서 실행해야 한다.

c

 

 

이제 카메라 권한을 달아주자

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA" />
<application
      ...
      android:requestLegacyExternalStorage="true">

 

App.js에 다음 코드 붙여넣기 - RNCamera 태그추가

import React from 'react';
import {Text,View,} from 'react-native';
import {RNCamera} from 'react-native-camera';

const App = () => {

  return(
    <View>
      <Text>Hello.</Text>
      <RNCamera style={{width:300, height: 300}} captureAudio={false}/>
    </View>
  );
}

export default App;

 

 

실제 안드로이드 폰이랑 react-native 연결하기

react-native run-android

 

npx react-native start

연결 완료~~~

 

 

 

https://blog.naver.com/PostView.naver?blogId=tt2t2am1118&logNo=222432924444&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView 

 

[앱 프로그래밍] 리액트 네이티브, 카메라달기.

이번에는 카메라 달기 입니다. reactnative.dev. 여기에 들어가서 camera로 검색해보면... https://reactna...

blog.naver.com