개발/React Native

리액트 네이티브 초간단 설치방법, 예시(맥, iOS)

리액트 네이티브를 개발하기 위해 맥(Mac OS)에서 iOS 시뮬레이터를 설치하고, 사용하는 방법에 대해 소개하도록 하겠습니다. 의존성 설치 Node & Watchman Homebrew를 사용하여 Node 및 Watchman을 설치하는 것을 추천합니다. Homebrew를 설치한 후 아래 명령어를 통해 패키지를 설치하세요. brew install node brew install watchman 이미 Node를 설치한 경우 Node 12 이상인지 확인해주세요. Watchman은 파일 시스템의 변경 사항을 관찰하기 위한 Facebook의 도구입니다. 더 나은 퍼포먼스를 위해 설치하는 것이 좋습니다. Xcode Xcode를 설치하는 가장 쉬운 방법은 Mac App Store를 활용하는 것입니다. Xcode를 설..

개발/React Native

리액트 네이티브 WebView iOS에서 postMessage가 동작하지 않을 때 해결하는 방법 (React Native WebView postMessage does not work)

리액트 네이티브(React Native, RN) Expo에서 웹뷰(Webview) 작업을 할 때, 앱과 웹 사이에서 커뮤니케이션을 하기 위해서 postMessage 메서드를 활용합니다. 하지만 안드로이드에서 postMessage 처리하는 방식과 iOS에서 postMessage를 처리하는 방식이 조금 다릅니다. 의존성 버전 "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz" "expo": "~36.0.0" 해결방법 안드로이드 플랫폼에서는 document 객체에 message 이벤트 리스너를 등록하고, iOS 플랫폼에서는 window 객체에 message 이벤트 리스너를 등록하면 해결됩니다. 안드로이드(Android..

개발/React Native

[리액트 네이티브(React Native, RN)] rn-sliding-up-panel 모듈에서 ScrollView 컴포넌트를 사용하는 방법(Enable ScrollView inside rn-sliding-up-panel module)

rn-sliding-up-panel 모듈이란? 아래와 같은 동작을 하는 UI 컴포넌트입니다. rn-sliding-up-panel Draggable sliding up panel implemented in React Native www.npmjs.com 의존성 버전 (dependencies version) "expo": "~36.0.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz" rn-sliding-up-panel 모듈에서 ScrollView 컴포넌트를 사용하는 방법 rn-sliding-up-panel 모듈에서 제공하는 Sli..

개발/React Native

[리액트 네이티브(React Native, RN)] 기기 글자 크기 조정 제한하는 방법

의존성 버전 (dependencies version) "expo": "~36.0.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", 리액트 네이티브 앱을 개발하다보면 디바이스에서 설정하는 글자 크기와 스타일에 따라서 애플리케이션 폰트 사이즈가 조정되는 것을 볼 수 있습니다. 우리가 사용하는 디바이스는 디바이스 별로 설정에서 글자 크기와 스타일을 조정할 수 있는 기능을 제공합니다. 문제는 글자 크기와 스타일에서 조정하는 크기들이 애플리케이션의 폰트 사이즈까지 반영이 된다는 점입니다. (물론 폰트 크기 조정을 제한하는 것은 좋은 ..

개발/React Native

[리액트 네이티브(React Native, RN)] 앱과 웹뷰(Webview) 사이에서 인터페이스를 활용해 커뮤니케이션(통신)하는 방법(react native communicate between app webview)

리액트 네이티브(React Native, RN)에서 코드를 구현하다보면 웹뷰(Webview)와 커뮤니케이션을 해야되는 상황이 생기는데요. 이때 리액트 네이티브에서는 인터페이스(Interface)를 활용해서 웹뷰와 커뮤니케이션(통신)을 할 수 있게 제공해주는 기능들이 존재합니다. 이번 포스팅에서는 이러한 기능을 소개하고, 앱 부분에서 처리하는 부분과 웹뷰에서 처리하는 부분을 나눠서 설명을 하도록 하겠습니다. 웹뷰 -> 앱 웹뷰(Webview) / 웹 코드 onMessage 이벤트를 활용한 간단한 예시를 다뤄보도록 할까요? onMessage 이벤트가 발생하는 조건은 웹뷰에서 ReactNativeWebView.postMessage가 실행되어야 됩니다. ReactNativeWebView.postMessage의 ..

개발/React Native

리액트 네이티브(React Native, RN)에서 카카오맵(Kakao 지도) API 사용하는 방법

Dependencies version react-native-webview@8.1.2 react-native@0.61.4 expo@~36.0.0 리액트 네이티브(React Native, RN)에서 카카오지도를 사용하는 방법은 웹뷰(Webview)를 활용하면 아주 간단하게 구현할 수 있습니다. 우선 react-native-webview 모듈을 사용해서 WebView 컴포넌트를 추가합니다. 저는 Location의 이름을 가진 stateful component를 생성하겠습니다. // react native screen view import { WebView } from "react-native-webview"; export default class Location extends Component { ... r..

개발/React Native

[리액트 네이티브(React-Native RN)] Expo에서 localhost webview 사용하는 방법

리액트 네이티브(React-Native RN)에서 localhost webview를 구성해야될 때가 있습니다. 웹뷰를 좀 더 편하게 디버깅하기 위해서도 있고, 좀 더 효율적으로 개발환경을 구성하기 위해서도 꼭 필요한 작업입니다. 하지만 단순하게 웹서버에서 열어준 localhost:{PORT}로 webview uri를 구성하면 아래와 같은 에러를 맞이하게 됩니다. Error loading page Domain: undefined Error: Code: -6 Description: net::ERR_CONNECTION_REFUSED 정말 간단하게 리액트 네이티브 웹뷰에서 우리가 구성하려는 웹뷰 로컬환경을 설정하는 방법은 웹뷰 개발 환경을 실행하기 전에 HOST=0.0.0.0을 설정하는 것입니다. // pack..

개발/React Native

[React Native] fontFamily fontName is not a system font and has not been loaded through Font.loadAsync.

Custom Font를 활용하기 위해 spoqa 폰트를 import하는 과정에서 아래와 같은 문제가 발생했습니다. fontFamily "spoqa-regular" is not a system font and has not been loaded through Font.loadAsync. - If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system. Dependencies React Native v0.61 해결방법 state = { loading: true }; async componentDidMount() { await Fon..

개발/React Native

[React Native] ViewPagerAndroid has been removed from React Native 문제 해결방법

React Native의 react-native-swiper 라이브러리를 활용해서 스와이프를 구현하려고 하는데 아래와 같은 에러가 발생했습니다. ViewPagerAndroid has been removed from React Native. It can now be installed and imported from 'react-native-viewpager' instead of 'react-native'. Dependencies React Native v0.61 react-native-swiper v1.5.14 해결방법 yarn remove react-native-swiper yarn add react-native-swiper@nightly react-native-swiper를 제거한 후 react-nat..

개발/React Native

[React Native] React Navigation bottom-tabs에 custom icon 적용하는 방법

리액트 네이티브 라이브러리 @react-navigation/bottom-tabs을 사용할 때 custom icon을 적용하는 방법에 대해서 설명하겠습니다. React Native와 React Navigation 버전정보는 아래와 같습니다. 꼭 참고하시기 바랍니다. Dependencies React Native v0.61 @react-navigation/bottom-tabs v5.0.7 저의 메인 라우트 설정은 아래와 같습니다. active와 inactive에 따른 이미지 처리를 하기 위해 각 이미지를 각 라우트의 property로 설정해뒀습니다. export const mainRoutes = [ { name: "메뉴1", com: Home, inactiveIcon: require("../assets/ic..