웹/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 창에서 실행해야 한다.
이제 카메라 권한을 달아주자
<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
연결 완료~~~
[앱 프로그래밍] 리액트 네이티브, 카메라달기.
이번에는 카메라 달기 입니다. reactnative.dev. 여기에 들어가서 camera로 검색해보면... https://reactna...
blog.naver.com