-
[리엑트 네이티브] React-Native-vector-iconReact Native 2019. 4. 9. 16:56
https://www.npmjs.com/package/react-native-vector-icons react-native-vector-icons Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling. www.npmjs.com react native vector icon 페키지는 정말 많이 사용하는 유용한 아이콘이다. 위의 페키지를 사용하면 쉽게 여러 가지 아이콘들을 사용할 수 있다. 간단한 사용방법 1. 설치하기 npm install react-native-vector-icons 설치가 잘 되었는지 확인하기 npm ls --depth=0 위 그림과 같이 설..
-
[리엑트 네이티브] Expo 기반 빌드React Native 2019. 2. 7. 11:24
리엑트 네이티브 expo 관련 빌드를 해보려고합니다. ^^잘 따라와 주세요 ㅎㅎ React Native build란?react-native + build 즉 직독 직해 하면 리엑트 네이티브를 짓는다 정도의 의미를 가집니다. expo에서는 build에 대해 "Apple App Store 및 Google Play 스토어에 제출할 수있는 iOS 및 Android 용 엑스포 앱의 독립 실행 형 바이너리를 만든다" 고설명하고 있습니다. 쉽게 말하면 앱스토어에 올릴수있는 파일을 만들어 낸다! 이해되셨나요? React Native build 해보기!expo에서 제공하는 문서를 따라서 진행보도록 하겠습니다.링크 : " https://docs.expo.io/versions/latest/distribution/buildi..
-
[리엑트 네이티브] 레이아웃React Native 2019. 2. 4. 11:58
레이아웃을 이해하기 위한 3가지 요소 [1] flexDirection - flex를 레이아웃의 수직 수평을 결정 => 수평 : row, 수직 : column [2] JustifyContents - flexDirection에 의해 결정된 방향과 동일 => 종류 : 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' [3] alignItems - flexDirection에 의형 결정된 방향과 반대 방향 => 종류 : 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' 읽어도 모르겠죠?? 예시로 설명해 보겠습니다. import React from 'react'; impor..
-
[리엑트 네이티브] 스타일 변경React Native 2019. 2. 4. 11:09
[1] inline [2] style object mapping const styles = StyleSheet.create({ B_box : {width: 50, height: 50, backgroundColor: 'black'} }); import React from 'react'; import { AppRegistry, View, StyleSheet } from 'react-native'; class Example extends React.Component { render() { return ( ); } }; const styles = StyleSheet.create({ B_box : {width: 50, height: 50, backgroundColor: 'black'} }); AppRegistry..