-
[React] 안드로이드로 react-native 연결하고 카메라 띄우기웹/Node.js & React.js 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
연결 완료~~~
'웹 > Node.js & React.js' 카테고리의 다른 글
[React] React-Native로 안드로이드 에뮬레이터 실행하기 (0) 2022.04.25 [Node&React] 오류 (0) 2022.03.16 [React.js] 리액트를 이용해서 회원가입 페이지 만들기 (0) 2022.02.13 [Node.js] postman을 이용하여 회원가입 기능 구현하기 (0) 2022.02.12