본문 바로가기

개발바닥/React-Native

(2)
[개발] React Native 노치 디자인 해결 방법 안녕하세요 devport 입니다. 이번에 React Native로 앱을 개발 하던중에 Apple의 iPhone이 사용하는 노치 디자인으로 인하여 상태표시 부분이 안보이는 현상이 있어서 해결하는 방법을 찾아보았습니다. 아이폰은 상단의 "상태 표시 줄"과 하단의 "Home indicator"부분으로 인하여 디자인 사용성에 영향을 받을 수 있습니다. 이것을 해결하기 위해서 안전영역(Safe area)영역을 추가하게되면 아래와 같이 보호 영역이 생성이 됩니다. 적용 소스 import * as React from 'react'; import { WebView } from 'react-native-webview'; import { SafeAreaView, StatusBar } from 'react-native'; ..
[개발] React Native 앱 개발에 대해 알아보자. 안녕하세요 devport 입니다. 이번에 하이브리드 앱을 개발할 수 있는 프레임워크 중 하나인 React Native에 대해서 알아 보도록 하겠습니다. 제가 이번 React Native를 알아보는 이유는 WebView에 이미 개발된 웹 호스트를 올려 실제 앱처럼 동작할 수 있다는 부분을 이용하기 위해서 입니다. 아무래도 포스팅의 방향도 React Native의 다양한 컴포넌트를 사용하는 방향으로 작성되지 않을 것을 여러분은 참고해주시면서 읽어주셨으면 합니다. React Native? React Native는 페이스북에서 개발 되었으며 오픈소스 모바일 애플리케이션 프레임워크 입니다. Android, IOS 등의 애플리케이션을 개발하기 위해서 사용되고 있으며 네이티브 플랫폼과 리액트라는 요소를 사용할 수 있..