라벨이 react native인 게시물 표시

React native webview에서 오디오 재생(부분해결)

1. 환경 - React native 0.55 WebView 컴포넌트에 오디오 재생(Audio.play())을 포함한 html 소스를 사용시 "cannot find variable Audio" 오류가 발생했다. 사용하는 소스는 DB에 저장되어 있고 PC 웹에서도 사용하므로 이 소스를 변경할 수는 없다. 2. 해결 1) react-native-audio-toolkit 설치    https://github.com/react-native-community/react-native-audio-toolkit/blob/master/docs/SETUP.md 를 참조해서 패키지를 설치한다. react-native link로 링크 시 app/build.gradle의 dependencies에는 제대로 들어가지 않아서 이부분만 직접 입력했다. 문서에는 수동 링크 부분에 패키지 이름이 react-native-community _ audio-toolkit 이라고 되어있는데 react-native-community / audio-toolkit 으로 입력해야 한다. dependencies {   ...   implementation project(':@react-native-community/audio-toolkit')   ...  } 2) Audio 대신 Player 사용   클래스 상단에 아래 코드를 추가하면 WebView 내에서도 this.Audio로 사용할 수 있다. export default class 클래스 extends Component {   Audio = Player;   constructor () { ... } 그 다음 html 소스에서 "Audio"를 모두 "this.Audio"로 바꾸면 된다. 소스 = 소스.replace(/Audio/gm, 'this.Audio'); WebView 컴포넌트는 아래처...

React native + firebase에서 패키지이름과 관련된 부분

1. 코드에서 1) android/app/src/main/java/[패키지 이름] : 패키지 이름 변경   ex> com/example/aaa -> com/example/bbb 2) android/app/build.gradle : defaultConfig.applicationId를 위에서 변경한 패키지 이름으로 변경   ex> applicationId "com.example.aaa" -> applicationId "com.example.bbb" 3) android/app/src/main/AndroidManifest.xml : package="패키지 이름" 부분을 변경   ex> <manifest ... package="com.example.aaa" -> <manifest ... package="com.example.bbb" 4) android/app/src/main/java/[패키지 이름]/MainActivity.java : getMainComponentName 함수에서 main component 이름을 변경   ex> return "aaa"; -> return "bbb"; 5) android/settings.gradle :  rootProject.name을 변경   ex> rootProject.name="aaa" -> rootProject.name="bbb" 6) /index.js :  등록할 컴포넌트 이름을 4)에서 설정한 이름으로 변경   ex> AppRegistry.registerComponent('aaa', () => 클래스이름); -> AppRegistry.registerComponent('bbb', () => 클래스이름); 7) android...

React native 0.59 + SDK 28(+AndroidX)로 업그레이드하면서 발생한 문제

0. 환경 (개발) - react-native 0.54 -> 0.59 - react 16.3 - mobx-react 5.1 -> 5.4 - mobx 4.3 -> 5.9 - babel ? -> 7 - babel-jest 24.3 -> 24.9 - sdk 26 -> 28 - android build tool 26 -> 28 - gradle 4.4 -> 4.10 - gradle build tool 3.1 -> 3.3 - google services 4.0 -> 4.2 - 64bit architecture 추가 - firebase-core 16 -> firebase-core 17 - react-native-google-signin 1.0 -> react-native-google-signin 2.0 (테스트) - android 8 - galaxy s8 1. 상황   잘 돌아가고 있던 프로젝트를 다시 실행했더니 빌드가 안된다. 찾아보니 패키지 버전 문제인 것 같아서 버전을 전체적으로 올리기로 결정. 2. sdk 버전 업 1) "Manifest merger failed : Attribute application@appComponentFactory..." 에러 발생    https://cishome.tistory.com/108 를 참조해서 gradles.properties에 아래 코드를 추가했다. android.useAndroidX=true android.enableJetifier=true 2) "cannot find symbol ..." 에러 발생   sdk 버전을 올리면서 android.으로 시작하는 패키지가 androidx.로 바뀌어서 못찾아오는 걸로 추정된다.( https://github.com/invertase/react-native-firebase/issues/2332 참조) 이걸 자동으로 해...

React native camera + google vision barcode detection (android)

0. 테스트 스펙 - React 16.3.0 - React native 0.55.4 - Android studio 3.2.1 - Galaxy S8 + SDK 26 - Gradle 3.1.3 1. React native camera https://github.com/react-native-community/react-native-camera 이 페이지에 상세히 나와있으니 설치하면 된다. 2. 기본 바코드 읽기(onBarcodeReaded) React native camera에서 자체적으로 지원하는 바코드 읽기 기능. { data: ...,  rawData: ..., type: ..., bounds: ... } 형식의 object로 결과가 리턴된다. https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md 상세는 이 페이지 참조. 리턴되는 bounds가 문서와 좀 다른 것 같다. 3. Google vision 사용한 바코드 읽기(onGoogleVisionBarcodesDetected) Google mobile vision을 사용한 바코드 읽기 기능. 읽어오는 바코드는 https://developers.google.com/android/reference/com/google/android/gms/vision/barcode/Barcode 이 페이지 참조. 기본 기능보다 빠르고 정확하지만 위치정보(이미지 내에서)를 알려주지 않는다. 그래서 위치정보를 숫자 배열로 받아오도록 수정. 1) node_modules\react-native-camera\android\src\main\java\org\reactnative\camera\BarcodesDetectedEvent.java의 serializeEventData method가 이벤트 발생 시 callback으로 리턴하는 데이터를 serialize하는 것 같다. ...

React-native 0.54 + OpenCV 3.4.3 + Android studio 3.2.1

1. 테스트 스펙 - Windows 10 - React-native 0.54 - OpenCV 3.4.3 - Android studio 3.2.1 - 갤럭시 S8(실기기) 2. React-native-opencv https://github.com/brainhubeu/react-native-opencv-tutorial 에서 소스를 clone 혹은 다운로드. 3. 2.의 페이지에서 시키는대로 한다. + openCVLibrary341을 openCVLibrary343으로. 다른 버전이라면 버전에 맞게 변경. + android\gradle\wrapper\gradle-wrapper.properties의 distributionUrl을 https\://services.gradle.org/distributions/gradle-4.4-all.zip 정도로 바꿔준다. + android\build.gradle > dependencies > classpath를 'com.android.tools.build:gradle:3.1.3' 정도로 바꿔준다. 4. 안된다. * react-native command가 없다. - npm install -g react-native-cli * google()이 없다.  - android\build.gradle의 buildscript > repositories, allprojects > repositories,에 google() 추가. google()이 jcenter() 보다 위에 와야한다는 말이 있다. * android.support.v4 has different version for the compile (에러 메시지 정확하지 않음)  - android\app\build.gradle > dependencies > implementation 'com.android.support:appcompat-v7:27.1.0' 정도로 수정 * Mod...