728x90
반응형
리액트 네이티브 초간단 설치방법, 예시(맥, iOS) 포스팅 썸네일 이미지

개발/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를 설..

2021.12.06 게시됨

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

개발/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..

2020.08.17 게시됨

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

개발/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..

2020.08.16 게시됨

[리액트 네이티브(React Native, RN)] 기기 글자 크기 조정 제한하는 방법 포스팅 썸네일 이미지

개발/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", 리액트 네이티브 앱을 개발하다보면 디바이스에서 설정하는 글자 크기와 스타일에 따라서 애플리케이션 폰트 사이즈가 조정되는 것을 볼 수 있습니다. 우리가 사용하는 디바이스는 디바이스 별로 설정에서 글자 크기와 스타일을 조정할 수 있는 기능을 제공합니다. 문제는 글자 크기와 스타일에서 조정하는 크기들이 애플리케이션의 폰트 사이즈까지 반영이 된다는 점입니다. (물론 폰트 크기 조정을 제한하는 것은 좋은 ..

2020.08.15 게시됨

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

개발/React Native

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

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

2020.08.13 게시됨

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

개발/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..

2020.08.06 게시됨

[리액트 네이티브(React-Native RN)] Expo에서 localhost webview 사용하는 방법 포스팅 썸네일 이미지

개발/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..

2020.08.03 게시됨

[React Native] fontFamily fontName is not a system font and has not been loaded through Font.loadAsync. 포스팅 썸네일 이미지

개발/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..

2020.03.09 게시됨

[React Native] ViewPagerAndroid has been removed from React Native 문제 해결방법 포스팅 썸네일 이미지

개발/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..

2020.03.09 게시됨

[React Native] React Navigation bottom-tabs에 custom icon 적용하는 방법 포스팅 썸네일 이미지

개발/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..

2020.03.01 게시됨

728x90
반응형