개발/React Natie 8

[React Native] apk release export error

apk를 추출하는 방법은 아주 쉽다. releae를 하려면 서명 키가 필요하다. keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 이렇게 키를 생성한다. 그리고 apk를 만들고자 하는 파일에 build.grdle로 가서 아래의 코드를 추가한다. signingConfigs { release { if (project.hasProperty('RELEASE_STORE_FILE')) { storeFile file(RELEASE_STORE_FILE) storePassword RELEASE_STORE_FILE_PASSWORD keyAlias RELEASE_STOR..

개발/React Natie 2020.02.27

[React-Native] Circular Progress Bar/ 원형 상태바 추가하는 법

RN에서 원형 프로그레스바를 그리는 방법은 다양하게 있다. 지금까지 개발하면서 느낀 점은 RN은 모듈화가 굉장히 잘 되어 있는 편이라서 원하는 모듈을 다운 받아서 설치하기만 하면 되기 때문에 개발이 간편하다고 생각이 든다. (익숙해진다면) 위와 같은 원형 바를 사용하기 위해서 선택한 모듈은 이것이다. react-native-circular-progress 모듈을 사용하기 위해서 설치부터 시작해 보겠다. yarn add react-native-circular-progress react-native-svg react-native link react-native-circular-progress react-native-svg react-native-circular-progress 만 설치하게 된다면 오류가 나게..

개발/React Natie 2020.02.03

[React Native] 인터넷 연결 확인법

react native의 인터넷 연결 확인은 NetInfo 라이브러리로 가능하다. import { NetInfo } from 'react-native'; 로 라이브러리를 import 해 주었다. Warning: NetInfo has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/netinfo' instead of 'react-native'. See https://github.com/react-native-community/react-native-netinfo 만약 실행시 이 오류가 뜬다면 Ne..

개발/React Natie 2020.01.15

[React Native] 언어 변경

언어 변경하는 것에는 여러가지 방법이 있는데... 아주 간단하게 i18n-js 라이브러리를 쓰는 것이다. 이것을 사용하면 현재 사용되는 언어를 가져올 수도 있고, 언어를 아주 손쉽게 바꿀 수도 있다. I18n.locale = 'ko' // 한국어로 변경 deviceLanguage = I18n.currentLocale(); // 현재 언어 출력 root폴더에 i18n이라는 폴더를 만들고 index.js를 만들었다. import i18n from 'i18n-js'; import { I18nManager } from 'react-native'; import * as RNLocalize from 'react-native-localize'; import en from './locales/en'; import ko..

개발/React Natie 2020.01.15

[React Native] 개발 환경 설정 (2)

React Native의 IDE는 뭐가 좋을까? FaceBook에서는 Atom과 FaceBook에서 개발한 nuclide 플러그인 조합을 추천한다고 한다. 그럼 환경 설정을 해 보자. Atom은 여기서 깔 수 있다. 그럼 Atom을 실행하고 nuclide를 설치해 보자. # Clone the source $ git clone https://github.com/facebook/nuclide.git $ cd nuclide # Install dependencies $ npm install # Link the 'nuclide' package to Atom's package directory $ apm link 설치가 제대로 됐는지 확인하는 방법은 아래와 같다. Open Atom. Go to Atom | Pref..

개발/React Natie 2020.01.10

[React-native ] react-native start 오류 해결법

Opening DevTools in the browser... (press shift-d to disable) error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class. Run CLI with --verbose flag for more details. 이런 오류가 뜬다면 node 호완성 문제이다. 해당 폴더의 \node_modules\metro-config\src\defaults\blacklist.js로 이동한다...

개발/React Natie 2020.01.10

[React Native] 프로젝트 빌드 오류 해결법

만약 프로젝트를 빌드 시켰는데 이런 오류가 난다면? error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 Unable to install E:\Rocket.Chat.ReactNative..

개발/React Natie 2020.01.09

[React Native] 개발 환경 설정 (1)

React Native (RN) FaceBook에서 개발한 웹사이트 개발용 라이브러리를 React라고 하는데, 이것을 모바일로 확장한 오픈소스 프로젝트이다. javaScript로 모바일 앱을 개발할 수 있으며 Android, ios를 둘 다 개발할 수 있다는 장점이 있다. 우리가 javaScript로 코딩하면 RN을 거쳐 안드로이드, ios 코드로 변환이 되는 개념인 것이다. 개발 설정을 하기에 앞서 Expo CLI 와 React Native CLI 두 가지의 방법이 있는데 Expo CLI는 라이브러리의 제약이 있다고 하여 React Native로 개발할 것이다. 그럼 환경 설정을 해 보자! 먼저 Window PowerShell 을 키고 윈도우 파일 매니저인 chocolatey를 설치한다. 중요한 것은 ..

개발/React Natie 2020.01.08