react-native Expo에서 react-native에서 three.js 사용 (expo-three 도입) expo-three라고 하는 라이브러리를 도입하려고 생각했습니다만, 일본어 문헌이 적게 시간이 걸려 버렸기 때문에, 스스로 재검토하는 의도도 담아 간단하게 정리하겠습니다. react-native, expo 등의 도입에 대해서는 이번은 생략하겠습니다. npm install three --savenpm install expo-three --save App.jsimport { GLView } fr... react-nativethree.jsexpo React Native + Expo 앱을 Deploy(네이티브 빌드) 이 기사에서는 까지 작성 도중의 Hello World 앱 (송장 앱 모형)을 Deploy합니다. 또한 expo-cli가 글로벌 설치되어 있다고 가정합니다. 설치했는지 모르는 경우 을 참조하십시오. Windows의 경우, 우선 내부적으로 Linux를 사용할 수 있는 상태로 하지 않으면 안됩니다. Expo는 Ubuntu를 권장하므로 다음 단계를 따르십시오. Microsoft Store를 열고 U... reactnativeReact자바스크립트react-nativeexpo React Native + Expo 앱 게시(공개): 테스트 배포 Expo로 만든 앱은 매우 쉽게 Publish하거나 Deploy 할 수 있습니다. 이 기사에서는, 까지 작성 도중의 Hello World 앱(송장 앱 모형)을 Publish 합니다. Publish도 Deploy도 다른 사용자가 앱을 실행할 수 있다는 의미에서 동일합니다. 큰 차이점은 Publish 버전의 실행은 Expo client가 필요하지만 Deploy 버전은 완전히 독립적 인 네이티브 ... reactnativeReact자바스크립트react-nativeexpo React Native + Expo 앱에서 QR 코드를 읽고 JSON 획득 까지, 송장 정보를 서버로부터 취득해 표시할 수 있게 되었으므로, 이번에는 호출할 서버의 정보를 QR 코드로부터 취득할 수 있도록(듯이) 합니다. QR코드에 미리 JSON을 넣어 두면, 복수의 설정 항목이 있는 설정을 앱의 설정 방법 설명서 없이 유저에게 실시해 줄 수 있게 되는 등, 편리성 업이나 업무의 효율화를 전망할 수 있습니다. 【주의】현시점에서, QR 스캐너 기능이 잘 동작하지 않는... reactnativeReact자바스크립트react-nativeexpo React Native + Expo + Visual Studio Code + Chrome으로 실제 기기 디버깅 이 기사는 " "의 자식 기사입니다. 이미 살짝 나왔습니다만, Expo와 Visual Studio Code로 개발 환경을 만들면, 자연스럽게 개발 동작 환경이 모바일 실기가 되어, 디버거는 Chrome이 됩니다. App.js에서 아래와 같이 Hello World!를 둘러싸는 Text 태그를 잘못해 보겠습니다. ※ 만약 Edge가 열리는 경우, 기본 브라우저를 Chrome으로 해 두는 것이 더... reactnativeReact자바스크립트react-nativeexpo ReactNative로 반응형 디자인을 만드는 유일한 방법 react-native는 표준으로 flex라는 반응형 시스템을 가지고 있다. 그러나, flex에 의한 style의 기법은, 단순한 것을 만들기에는 좋지만, 복잡한 것을 만들기 시작하면 파성한다. flex를 대체할 라이브러리를 찾았으므로 소개합니다. 이 라이브러리를 사용하면, flex를 일절 사용하지 않고 style를 쓸 수 있게 되므로, 상당히 편해집니다. 사실, ios 그리고 안드로이드 는... react-nativereact-native-responsive-screenexpo Expo의 Android 에뮬레이터에서 Nox 사용 Mac Os X expo 31.0.0 Android Studio 설치됨 adb(Android Debug Bridge) 명령이 사용 가능합니다. Nox 1.2.6.0 아래에서 Nox를 설치한다. Nox 시동 후 오른쪽 상단의 기어를 누릅니다. ROOT를 켭니다. 적절하게 메모리와 화면 크기를 변경하십시오. 설정 저장. (재부팅됩니다.) 오른쪽 하단의 "설정"을 누릅니다. 하단의 태블릿 정보를 ... 안드로이드reactnativereact-nativeexpo ReactNative-EXPO에서 Android 에뮬레이터로 앱을 시작하기 전까지 "AVD Manager"가 메뉴에없는 문제 Intel x86 Emulator Accelerator (HAXM)가 없으면 화난다 This computer is not authorized to debug the device. 어떤 앱을 expo client를 인스톨 한 i phone(실기)에서 동작 확인하면서 개발중. 에뮬레이터를 사용하는 경우 먼저 android Studio에서 'AVD Man... reactnativereact-nativeAndroidStudioexpo Expo에서 admob을 통합했을 때의 초 개인 메모 Expo에 admob이 붙어 있기 때문에 시도했다. 타사 라이브러리에 의존하지 않아도 광고를 게재하는 것은 대단히 편리합니다. 제대로 admob이 표시됩니다. 훌륭합니다.... react-nativeadMobexpo Expo에서 firebase analytics 사용할 수는 없지만, 더 좋은 것 있어. 우선, Expo가 공식적으로 대응하고 있는 analytics 서비스의 Amplitude에 계정을 만들고 API key를 Get합시다. (불행히도 Expo에서는 firebase analytics를 사용할 수 없지만 fierbase보다 amplitude가 사용하기 쉽습니다.) Amplitude라는 분석 서비스가 expo에서 표준으로 제공되며 코드에서 import { Amplitude } from... reactnativeReactreact-nativeAmplitudeexpo React Native & Expo v31에서 TypeScript 사용하기 React Native 0.57 이후로 TypeScript가 디폴트 서포트된 적도 있어, 최근에는 확실히 TypeScript를 사용하고 있었습니다만, expo v31에서도 TypeScript가 기본 지원이 된 것 같기 때문에 시험에 시작해 보겠습니다. 1) 우선 프로젝트 만들기 React Native의 공식 문서대로 expo-cli 설치 및 프로젝트 만들기 2) typescript 도입 전에... reactnativereact-nativeexpo React-native를 expo.io로 실제 기계 디버깅 (CLI 버전) Node.js를 넣습니다. npm install exp --global create app app start input maill address 여기에 QR 코드가 표시되므로 카메라로 촬영하여 액세스한다. 시작됨... react-nativeexpo 【초보자용&메모】react-native init하고 welcome 화면 내기까지 그냥 공식 문서대로 절차를 진행react-native run-ios 명령으로 빌드하고 싶습니다 (welcome 화면을 표시하고 싶습니다) ... 그냥. 공식 문서↓ 그러나 패키지 관리는 yarn에서하고 싶습니다! (이번에는 npm을 사용하고 싶지 않습니다) 공식 문서에 말한대로 절차를 밟아 간다. 노드 설치 node, watchman 설치 설치 후,node --versionv8.5.0watc... YARNiOSreact-native janus webrtc gateway + react native webrtc for iOS and Android 여기서, 후보가 되는 것이, ①대규모 전달에서 지연을 허용할 수 있는 경우는 HLS②소규모 전달으로 지연 없이라면 WEBRTC-SFU(힘내면 할 수 있을 것 같지만). WEBRTC-SFU에서 자신은 janus를 좋아하기 때문에, 그 모바일의 예를 react-native를 이용해 구현했다. janus gateway의 video room plugin을 사용. 본가의 janus.js는 npm 모듈... iOSReactreact-native안드로이드WebRTC react-native-maps를 설치하고 우선 지도를 내보내기 을 설치하고 먼저지도를 떠날 때까지의 단계를 정리합니다 iOS 용 빌드 만 시도했기 때문에 iOS 용 단계 만 작성했습니다 네이티브 기능을 사용하기 위해 create-react-native-app 한 사람은 eject가 필요합니다 버전 react-native: 0.47.0 react-native-maps: 0.16.4 react-native-maps 설치 종속 네이티브 라이브러리를 설치하고 ... reactnativereact-native ReactNative로 간단한 fetch에서 FlatList→onPress까지의 샘플 프로그램(CRNA) 이 도 아마추어 기사로부터 1주일・・・ 기본적인 곳은 알고 온 것 같습니다. 그래서 기본 코드를 작성했기 때문에 조금이라도 참고가 되는 분이 있으면 다행입니다. 그물이라면 부품 만의 정보로 상당히 고생했기 때문에 나는 전 문재 하는 파로 갑니다 (^^♪ 기본적인 것은 쓸 수 있어야합니다. 제목에 쓴 fetch · FlatList 이외에도 state나 라이프사이클, 애로우 function, o... reactnativereact-nativeReact스마트폰 React Native의 ART를 사용하여 도형 그리기를 시도 React Native에는 Docs에는 없는 ART라는 SVG 같은 형태로 도형 그릴 수 있는 라이브러리가 있습니다. 새롭게 라이브러리 추가하지 않고 사용할 수 있고, 일단 공식이므로 안심감도 있습니다. 그런 ART를 조금 만져 보았으므로, 도입 순서와 사용법을 남겨 둡니다. 우선은 평소의 초기 순서로 iOS로 기동까지 합니다. Android는 그대로 OK이므로 iOS 만 Xcode에서 다음... react-artreactnativereact-native react-native-git-upgrade에서 Apple Mach-O Linker (ld) Error Group!이 나왔을 때 해결하는 방법 React Native의 버전 업에서 "Apple Mach-O Linker (ld) Error Group!"라는 오류가 나오고, 이틀 정도 고민했기 때문에, 해결 방법을 메모해 둡니다. React Native 0.41.2 -> 0.45.0으로 ↓의 절차에 따라 react-native-git-upgrade를 사용하여 업그레이드했습니다. Upgrading to new React Native ve... XcodeiOScocoapodsreact-native React-Native 앱을 Appetize에서 공개해 보았습니다. React-Native에서 만든 iOS 앱을 Appetize에서 게시할 때까지 '나는 이렇게 하면 잘 작동했습니다'를 공유합니다. 에 따라 진행했습니다만, jsbundle를 만드는 커멘드만 조금 하는 방법이 다릅니다. (기사대로라면 잘 되지 않았기 때문에...) 나 자신도 초보자이므로, 방법에 잘못이 있으면 가르쳐 주시면 다행입니다. 덧붙여서 Xcode에서 앱 이름 .xcodeproj를 연 ... appetizereact-native React Native 곤란했을 때 에러의 견해 비망록(Android편) 최근 React Native 앱 출시를 도와주었습니다. 했을 때 나온다. 이 녀석의 견해입니다. 이렇게 하면 오류 세부 정보를 볼 수 있습니다. 할 수 있을 것 같은 분위기가 있기 때문에 자주 이것을 하고, 아아 이제・・・라고 됩니다. 네이티브 측에서 문제가 발생했을 때 일어나기 쉽습니다. 최근에는, gradle로 넣으려고 하는 패키지 입고 있어라든지 이것이었습니다. 그리고 apk 경로 이상... 안드로이드reactnativereact-native react-native + redux에서 hot reloading에서 오류를 처리 Beta에 쓰면 Redux 2.x에서 Hot Reloading에 실패하고 오류가 발생합니다. store 의 동적 교환할 수 있는 것 같은 코드로 한다. It works!... react-nativeredux [ios]react-native에서 facebook 로그인 버튼을 낼 때 빠졌습니다. 엉망이 되었기 때문에 메모. 동작 확인은 react-native의 공식 설정 절차에 따라 한 번에 설정했을 것입니다. 빌드에 실패한다. 뭔가 facebookSDK를로드하지 못했습니다. 역시 패스의 지정이 나빴다. 이 퀵 스타트에서 가장 첫 번째 단계에서 이미 잘못되었습니다. 나는 건방진에 공식적으로 지시된 아래의 경로가 아니다. 자신의 프로젝트 폴더(ex. ~/Mobile)에 다운로드한 Fa... iOSreact-native React-Native로 실제 기계 iPhone에 설치 샘플 코드를 촬영했습니다. 시뮬레이터에서는 문제 없었는데 Xcode로 빌드하면 에러가 되었으므로 그 해결 방법 등을 남겨 둔다. 결론부터 말해 버리면 앱의 명칭이나 Bundle Identifier, 개발자 등록 등의 정보가 누설되어 주었다. ↑의 React Native 입문 3의 샘플 코드에 실수가없는 것 시뮬레이터에서 문제없이 작동하면 아마도 문제가되지 않습니다 iOS에서 한 번도 개발한 ... react-native react-native에 ESLint(airbnb style)를 적용했을 때의 비포 애프터 react-native 프로젝트 작성 직후의 코드에 airbnb 스타일을 적용해 보겠습니다. 또한 환경은 MacOSX El Capitan, react-native의 버전은 0.32.0입니다. 이 상태의 index.ios.js는 다음과 같습니다. 참고. .eslintrc 를 프로젝트 루트에 만들고 airbnb 를 extends 합니다. 좋아하는 에디터로 Linter 기능을 ON으로 합니다. 이... react-native자바스크립트ReactESLint React-Native에서 Cmd + R을 사용해도 다시로드되지 않는 문제와 그 원인 조금 React Native를 사용해 보려고 공식 페이지의 Getting started에 있는 대로 명령을 치다 그러면 디폴트의 다음과 같은 화면이 나올 것. 여기까지는 문제 없다. 여기서 화면에 있는 대로 Cmd+R 와 키 입력해도 무반응. 이상한. 물론 Cmd+D 잘 안돼. 결론에서 말하면, 문제는 Dvorak 배열을 사용하는 것이 었습니다! Cmd+P(Qwerty配列のR) 에서 Relo... iOSReact자바스크립트react-nativeDvorak React Native flex 속성, 단조 배치, 고정 요소 배치 방법 CSS와 같은 속성 그룹이지만 CSS와 다를 수 있습니다. flex:number 라고 하는 기술 그래서, flex 프로퍼티를 해설하는 것과 동시에, 단조나 고정 요소의 배치 방법을 써 가고 싶습니다. 샘플 코드 등을 보면 flex:1이라는 설명을 잘 볼 수 있습니다. flex 속성은 화면에 대한 요소의 flexDirection 방향의 크기 비율입니다. 위의 경우에 화면에 flex:1의 요소를... reactnativereact-native자바스크립트React React-Native를 iOS 실제 기기로 빌드 한 후 노드 바이너리를 찾을 수 없으면 오류가 발생했습니다. 비망록입니다. Xcode 7.2.1 react-native-cli 0.1.10 React-Native로 Init 한 프로젝트에 대해 OS 실제 기기를 대상으로 빌드하면 다음 노드의 오류가 발생했습니다. PATH 다니고 있을 것이라고 생각하면서 해결 방법을 찾아 보았습니다 Project 파일 선택 -> TARGETS -> APP Name -> Build Phases -> Bundle React... react-native react-native: 키보드를 열면 입력란이 숨겨지는 문제 해결 React Native의 <TextInput>에 포커스가 닿으면 iOS에서는 키보드가 아래에서 올라와 UI 위에 겹치지만 React Native는 입력란이 화면에 보이는 상태로 표시되어 있을 때까지는 번거로움을 봐 아니. 예를 들어, 입력란이 화면의 최하부에 있는 것 같은 UI에서는, 입력란이 키보드로 단단히 숨어 버린다. 해결책으로서는, 컴퍼넌트측에서 키보드의 개폐 이벤트를 받아, 키보드가... iOSreact-nativereactnative
Expo에서 react-native에서 three.js 사용 (expo-three 도입) expo-three라고 하는 라이브러리를 도입하려고 생각했습니다만, 일본어 문헌이 적게 시간이 걸려 버렸기 때문에, 스스로 재검토하는 의도도 담아 간단하게 정리하겠습니다. react-native, expo 등의 도입에 대해서는 이번은 생략하겠습니다. npm install three --savenpm install expo-three --save App.jsimport { GLView } fr... react-nativethree.jsexpo React Native + Expo 앱을 Deploy(네이티브 빌드) 이 기사에서는 까지 작성 도중의 Hello World 앱 (송장 앱 모형)을 Deploy합니다. 또한 expo-cli가 글로벌 설치되어 있다고 가정합니다. 설치했는지 모르는 경우 을 참조하십시오. Windows의 경우, 우선 내부적으로 Linux를 사용할 수 있는 상태로 하지 않으면 안됩니다. Expo는 Ubuntu를 권장하므로 다음 단계를 따르십시오. Microsoft Store를 열고 U... reactnativeReact자바스크립트react-nativeexpo React Native + Expo 앱 게시(공개): 테스트 배포 Expo로 만든 앱은 매우 쉽게 Publish하거나 Deploy 할 수 있습니다. 이 기사에서는, 까지 작성 도중의 Hello World 앱(송장 앱 모형)을 Publish 합니다. Publish도 Deploy도 다른 사용자가 앱을 실행할 수 있다는 의미에서 동일합니다. 큰 차이점은 Publish 버전의 실행은 Expo client가 필요하지만 Deploy 버전은 완전히 독립적 인 네이티브 ... reactnativeReact자바스크립트react-nativeexpo React Native + Expo 앱에서 QR 코드를 읽고 JSON 획득 까지, 송장 정보를 서버로부터 취득해 표시할 수 있게 되었으므로, 이번에는 호출할 서버의 정보를 QR 코드로부터 취득할 수 있도록(듯이) 합니다. QR코드에 미리 JSON을 넣어 두면, 복수의 설정 항목이 있는 설정을 앱의 설정 방법 설명서 없이 유저에게 실시해 줄 수 있게 되는 등, 편리성 업이나 업무의 효율화를 전망할 수 있습니다. 【주의】현시점에서, QR 스캐너 기능이 잘 동작하지 않는... reactnativeReact자바스크립트react-nativeexpo React Native + Expo + Visual Studio Code + Chrome으로 실제 기기 디버깅 이 기사는 " "의 자식 기사입니다. 이미 살짝 나왔습니다만, Expo와 Visual Studio Code로 개발 환경을 만들면, 자연스럽게 개발 동작 환경이 모바일 실기가 되어, 디버거는 Chrome이 됩니다. App.js에서 아래와 같이 Hello World!를 둘러싸는 Text 태그를 잘못해 보겠습니다. ※ 만약 Edge가 열리는 경우, 기본 브라우저를 Chrome으로 해 두는 것이 더... reactnativeReact자바스크립트react-nativeexpo ReactNative로 반응형 디자인을 만드는 유일한 방법 react-native는 표준으로 flex라는 반응형 시스템을 가지고 있다. 그러나, flex에 의한 style의 기법은, 단순한 것을 만들기에는 좋지만, 복잡한 것을 만들기 시작하면 파성한다. flex를 대체할 라이브러리를 찾았으므로 소개합니다. 이 라이브러리를 사용하면, flex를 일절 사용하지 않고 style를 쓸 수 있게 되므로, 상당히 편해집니다. 사실, ios 그리고 안드로이드 는... react-nativereact-native-responsive-screenexpo Expo의 Android 에뮬레이터에서 Nox 사용 Mac Os X expo 31.0.0 Android Studio 설치됨 adb(Android Debug Bridge) 명령이 사용 가능합니다. Nox 1.2.6.0 아래에서 Nox를 설치한다. Nox 시동 후 오른쪽 상단의 기어를 누릅니다. ROOT를 켭니다. 적절하게 메모리와 화면 크기를 변경하십시오. 설정 저장. (재부팅됩니다.) 오른쪽 하단의 "설정"을 누릅니다. 하단의 태블릿 정보를 ... 안드로이드reactnativereact-nativeexpo ReactNative-EXPO에서 Android 에뮬레이터로 앱을 시작하기 전까지 "AVD Manager"가 메뉴에없는 문제 Intel x86 Emulator Accelerator (HAXM)가 없으면 화난다 This computer is not authorized to debug the device. 어떤 앱을 expo client를 인스톨 한 i phone(실기)에서 동작 확인하면서 개발중. 에뮬레이터를 사용하는 경우 먼저 android Studio에서 'AVD Man... reactnativereact-nativeAndroidStudioexpo Expo에서 admob을 통합했을 때의 초 개인 메모 Expo에 admob이 붙어 있기 때문에 시도했다. 타사 라이브러리에 의존하지 않아도 광고를 게재하는 것은 대단히 편리합니다. 제대로 admob이 표시됩니다. 훌륭합니다.... react-nativeadMobexpo Expo에서 firebase analytics 사용할 수는 없지만, 더 좋은 것 있어. 우선, Expo가 공식적으로 대응하고 있는 analytics 서비스의 Amplitude에 계정을 만들고 API key를 Get합시다. (불행히도 Expo에서는 firebase analytics를 사용할 수 없지만 fierbase보다 amplitude가 사용하기 쉽습니다.) Amplitude라는 분석 서비스가 expo에서 표준으로 제공되며 코드에서 import { Amplitude } from... reactnativeReactreact-nativeAmplitudeexpo React Native & Expo v31에서 TypeScript 사용하기 React Native 0.57 이후로 TypeScript가 디폴트 서포트된 적도 있어, 최근에는 확실히 TypeScript를 사용하고 있었습니다만, expo v31에서도 TypeScript가 기본 지원이 된 것 같기 때문에 시험에 시작해 보겠습니다. 1) 우선 프로젝트 만들기 React Native의 공식 문서대로 expo-cli 설치 및 프로젝트 만들기 2) typescript 도입 전에... reactnativereact-nativeexpo React-native를 expo.io로 실제 기계 디버깅 (CLI 버전) Node.js를 넣습니다. npm install exp --global create app app start input maill address 여기에 QR 코드가 표시되므로 카메라로 촬영하여 액세스한다. 시작됨... react-nativeexpo 【초보자용&메모】react-native init하고 welcome 화면 내기까지 그냥 공식 문서대로 절차를 진행react-native run-ios 명령으로 빌드하고 싶습니다 (welcome 화면을 표시하고 싶습니다) ... 그냥. 공식 문서↓ 그러나 패키지 관리는 yarn에서하고 싶습니다! (이번에는 npm을 사용하고 싶지 않습니다) 공식 문서에 말한대로 절차를 밟아 간다. 노드 설치 node, watchman 설치 설치 후,node --versionv8.5.0watc... YARNiOSreact-native janus webrtc gateway + react native webrtc for iOS and Android 여기서, 후보가 되는 것이, ①대규모 전달에서 지연을 허용할 수 있는 경우는 HLS②소규모 전달으로 지연 없이라면 WEBRTC-SFU(힘내면 할 수 있을 것 같지만). WEBRTC-SFU에서 자신은 janus를 좋아하기 때문에, 그 모바일의 예를 react-native를 이용해 구현했다. janus gateway의 video room plugin을 사용. 본가의 janus.js는 npm 모듈... iOSReactreact-native안드로이드WebRTC react-native-maps를 설치하고 우선 지도를 내보내기 을 설치하고 먼저지도를 떠날 때까지의 단계를 정리합니다 iOS 용 빌드 만 시도했기 때문에 iOS 용 단계 만 작성했습니다 네이티브 기능을 사용하기 위해 create-react-native-app 한 사람은 eject가 필요합니다 버전 react-native: 0.47.0 react-native-maps: 0.16.4 react-native-maps 설치 종속 네이티브 라이브러리를 설치하고 ... reactnativereact-native ReactNative로 간단한 fetch에서 FlatList→onPress까지의 샘플 프로그램(CRNA) 이 도 아마추어 기사로부터 1주일・・・ 기본적인 곳은 알고 온 것 같습니다. 그래서 기본 코드를 작성했기 때문에 조금이라도 참고가 되는 분이 있으면 다행입니다. 그물이라면 부품 만의 정보로 상당히 고생했기 때문에 나는 전 문재 하는 파로 갑니다 (^^♪ 기본적인 것은 쓸 수 있어야합니다. 제목에 쓴 fetch · FlatList 이외에도 state나 라이프사이클, 애로우 function, o... reactnativereact-nativeReact스마트폰 React Native의 ART를 사용하여 도형 그리기를 시도 React Native에는 Docs에는 없는 ART라는 SVG 같은 형태로 도형 그릴 수 있는 라이브러리가 있습니다. 새롭게 라이브러리 추가하지 않고 사용할 수 있고, 일단 공식이므로 안심감도 있습니다. 그런 ART를 조금 만져 보았으므로, 도입 순서와 사용법을 남겨 둡니다. 우선은 평소의 초기 순서로 iOS로 기동까지 합니다. Android는 그대로 OK이므로 iOS 만 Xcode에서 다음... react-artreactnativereact-native react-native-git-upgrade에서 Apple Mach-O Linker (ld) Error Group!이 나왔을 때 해결하는 방법 React Native의 버전 업에서 "Apple Mach-O Linker (ld) Error Group!"라는 오류가 나오고, 이틀 정도 고민했기 때문에, 해결 방법을 메모해 둡니다. React Native 0.41.2 -> 0.45.0으로 ↓의 절차에 따라 react-native-git-upgrade를 사용하여 업그레이드했습니다. Upgrading to new React Native ve... XcodeiOScocoapodsreact-native React-Native 앱을 Appetize에서 공개해 보았습니다. React-Native에서 만든 iOS 앱을 Appetize에서 게시할 때까지 '나는 이렇게 하면 잘 작동했습니다'를 공유합니다. 에 따라 진행했습니다만, jsbundle를 만드는 커멘드만 조금 하는 방법이 다릅니다. (기사대로라면 잘 되지 않았기 때문에...) 나 자신도 초보자이므로, 방법에 잘못이 있으면 가르쳐 주시면 다행입니다. 덧붙여서 Xcode에서 앱 이름 .xcodeproj를 연 ... appetizereact-native React Native 곤란했을 때 에러의 견해 비망록(Android편) 최근 React Native 앱 출시를 도와주었습니다. 했을 때 나온다. 이 녀석의 견해입니다. 이렇게 하면 오류 세부 정보를 볼 수 있습니다. 할 수 있을 것 같은 분위기가 있기 때문에 자주 이것을 하고, 아아 이제・・・라고 됩니다. 네이티브 측에서 문제가 발생했을 때 일어나기 쉽습니다. 최근에는, gradle로 넣으려고 하는 패키지 입고 있어라든지 이것이었습니다. 그리고 apk 경로 이상... 안드로이드reactnativereact-native react-native + redux에서 hot reloading에서 오류를 처리 Beta에 쓰면 Redux 2.x에서 Hot Reloading에 실패하고 오류가 발생합니다. store 의 동적 교환할 수 있는 것 같은 코드로 한다. It works!... react-nativeredux [ios]react-native에서 facebook 로그인 버튼을 낼 때 빠졌습니다. 엉망이 되었기 때문에 메모. 동작 확인은 react-native의 공식 설정 절차에 따라 한 번에 설정했을 것입니다. 빌드에 실패한다. 뭔가 facebookSDK를로드하지 못했습니다. 역시 패스의 지정이 나빴다. 이 퀵 스타트에서 가장 첫 번째 단계에서 이미 잘못되었습니다. 나는 건방진에 공식적으로 지시된 아래의 경로가 아니다. 자신의 프로젝트 폴더(ex. ~/Mobile)에 다운로드한 Fa... iOSreact-native React-Native로 실제 기계 iPhone에 설치 샘플 코드를 촬영했습니다. 시뮬레이터에서는 문제 없었는데 Xcode로 빌드하면 에러가 되었으므로 그 해결 방법 등을 남겨 둔다. 결론부터 말해 버리면 앱의 명칭이나 Bundle Identifier, 개발자 등록 등의 정보가 누설되어 주었다. ↑의 React Native 입문 3의 샘플 코드에 실수가없는 것 시뮬레이터에서 문제없이 작동하면 아마도 문제가되지 않습니다 iOS에서 한 번도 개발한 ... react-native react-native에 ESLint(airbnb style)를 적용했을 때의 비포 애프터 react-native 프로젝트 작성 직후의 코드에 airbnb 스타일을 적용해 보겠습니다. 또한 환경은 MacOSX El Capitan, react-native의 버전은 0.32.0입니다. 이 상태의 index.ios.js는 다음과 같습니다. 참고. .eslintrc 를 프로젝트 루트에 만들고 airbnb 를 extends 합니다. 좋아하는 에디터로 Linter 기능을 ON으로 합니다. 이... react-native자바스크립트ReactESLint React-Native에서 Cmd + R을 사용해도 다시로드되지 않는 문제와 그 원인 조금 React Native를 사용해 보려고 공식 페이지의 Getting started에 있는 대로 명령을 치다 그러면 디폴트의 다음과 같은 화면이 나올 것. 여기까지는 문제 없다. 여기서 화면에 있는 대로 Cmd+R 와 키 입력해도 무반응. 이상한. 물론 Cmd+D 잘 안돼. 결론에서 말하면, 문제는 Dvorak 배열을 사용하는 것이 었습니다! Cmd+P(Qwerty配列のR) 에서 Relo... iOSReact자바스크립트react-nativeDvorak React Native flex 속성, 단조 배치, 고정 요소 배치 방법 CSS와 같은 속성 그룹이지만 CSS와 다를 수 있습니다. flex:number 라고 하는 기술 그래서, flex 프로퍼티를 해설하는 것과 동시에, 단조나 고정 요소의 배치 방법을 써 가고 싶습니다. 샘플 코드 등을 보면 flex:1이라는 설명을 잘 볼 수 있습니다. flex 속성은 화면에 대한 요소의 flexDirection 방향의 크기 비율입니다. 위의 경우에 화면에 flex:1의 요소를... reactnativereact-native자바스크립트React React-Native를 iOS 실제 기기로 빌드 한 후 노드 바이너리를 찾을 수 없으면 오류가 발생했습니다. 비망록입니다. Xcode 7.2.1 react-native-cli 0.1.10 React-Native로 Init 한 프로젝트에 대해 OS 실제 기기를 대상으로 빌드하면 다음 노드의 오류가 발생했습니다. PATH 다니고 있을 것이라고 생각하면서 해결 방법을 찾아 보았습니다 Project 파일 선택 -> TARGETS -> APP Name -> Build Phases -> Bundle React... react-native react-native: 키보드를 열면 입력란이 숨겨지는 문제 해결 React Native의 <TextInput>에 포커스가 닿으면 iOS에서는 키보드가 아래에서 올라와 UI 위에 겹치지만 React Native는 입력란이 화면에 보이는 상태로 표시되어 있을 때까지는 번거로움을 봐 아니. 예를 들어, 입력란이 화면의 최하부에 있는 것 같은 UI에서는, 입력란이 키보드로 단단히 숨어 버린다. 해결책으로서는, 컴퍼넌트측에서 키보드의 개폐 이벤트를 받아, 키보드가... iOSreact-nativereactnative