React Native (6) 썸네일형 리스트형 리액트 네이티브에서 화면이 상태바 영역을 넘어가지 않게 하는 방법 핸드폰에서 상태바 영역도 화면으로 취급되기 때문에 margin 값을 주지 않으면 컴포넌트가 겹치게 되어 지저분하게 보인다. 그렇다고 일정한 margin 값을 주더라도 기기마다 상태바의 높이가 다르기 때문에 올바른 해결 방법이 될 수 없다. 아이폰의 경우 View 대신 SafeAreaView를 쓰면 간단히 해결할 수 있다. 그러나 안드로이드는 안 먹히기 때문에 다른 방법을 찾아야 한다. 이를 해결하기 위해 expo-constants를 설치하자. npm i expo-constants 모듈에 있는 statusBarHeight 속성을 이용하면 기기의 상태바 높이를 구할 수 있다. import Constants from 'expo-constants'; // Constants로 불러온다. function App().. 리액트 네이티브에서 리스트를 구현하는 방법 - FlatList 리액트 JS에서 map 메소드를 이용해 배열에 각 컴포넌트를 담아 렌더링하는 것과 달리 리액트 네이티브에서는 FlatList를 이용해서 리액트 JS와 유사하게 리스트를 구현한다. FlatList의 data 속성에 배열을 담고 keyExtractor에는 유니크한 key를, renderItem에 렌더링될 컴포넌트를 넣는다. map 메소드를 쓰는 것과 유사한 형태다. import React from 'react'; import { FlatList } from 'react-native'; import ListItem from './listItem' const messages = [ { id: 1, message: 'hello' }, { id: 2, message: 'bye' } ]; function App() .. 안드로이드와 iOS 환경에 따라서 다른 컴포넌트를 불러오는 방법 리액트 네이티브를 이용하면 안드로이드와 iOS 앱을 동시에 만들 수 있다. 리액트 네이티브가 알아서 각 환경에 맞춰 빌드해주기 때문이다. 그러나 안드로이드에서만 적용되거나 iOS에서만 적용되는 경우도 있어서 각 환경에 따른 분기를 종종 해줘야 한다. 예를 들어 Courier라는 폰트는 iOS에서만 쓸 수 있고 Roboto라는 폰트는 안드로이드에서만 쓸 수 있다. 이런 경우 분기를 해주려면 Text 컴포넌트의 스타일에 Platform.OS를 이용해서 환경에 따라 다른 fontFamily를 적용할 수도 있지만 사용자 Text 컴포넌트를 따로 만드는 게 깔끔할 것 같다. // AppText.ios.js import React from 'react'; import { StyleSheet, Text } from .. 리액트 네이티브에서 아이콘 넣는 방법 엑스포를 이용해서 리액트 네이티브 프로젝트를 만들었다면 다음과 같이 아이콘 모듈을 불러올 수 있다. import { MaterialCommunityIcons } from '@expo/vector-icons'; 아래 링크에서 고를 수 있다. https://icons.expo.fyi/ 예를 들어 MaterialCommunityIcons라는 아이콘 카테고리에서 arrow-right 아이콘을 넣고 싶다면 핸드폰의 화면 회전에 따라 레이아웃을 다르게 만드는 방법 리액트 네이티브에서 핸드폰을 90도로 돌렸을 때 레이아웃이 달라지도록 설정하면 화면이 좌우로 길어져서 모양이 다 망가진다. 때문에 핸드폰을 세로로 놓았을 때와 가로로 놓았을 때의 경우를 둘 다 처리해줘야 한다. 이를 위해 핸드폰의 방향이 바뀌었을 때 호출되는 함수가 필요한데 useDeviceOrientation() 훅스를 쓰면 아래의 객체를 리턴해서 핸드폰의 놓인 상태에 따라 레이아웃을 다르게 표현해줄 수 있다. { landscape: false, portrait: true } 이 훅스를 쓰려면 다음 모듈을 설치해야 한다. npm i @react-native-community/hooks 아래처럼 추가해서 쓸 수 있다. import { useDimensions, useDeviceOrientation } f.. Expo 설치, React Native 프로젝트 생성 1. 다음을 입력해서 expo를 글로벌로 설치한다. sudo npm i -g expo-cli 2. 다음을 입력해서 프로젝트를 생성한다. expo init 프로젝트이름 2-1. expo 명령어를 인식하지 못하는 경우 아래 링크를 참고해서 ~/.bash_profile에 export PATH=$PATH:~/.npm-global/bin를 추가해서 다시 실행하니 됐던 것 같다. 참고 : https://forums.expo.io/t/expo-cli-looks-installed-but-expo-command-not-found/14535 3. Managed workflow의 blank를 선택한다. 이전 1 다음
