React/ReactNative
React-Native ( style 속성과 StyleSheet API 이해하기) - part4
컴포넌트 배치 관련 스타일 속성 탐구하기 (코드는 맨 아래에) flex: 1과 height: '100%'의 차이 height: '100%'스타일은 높이와 무관하게 부모 컴포넌트의 높이를 모두 가져오므로 ( Dimensions.get('window').height )값을 설정한 것과 같은 효과가 나타난다 하지만 flex: Integer 는 자식 요소 끼리 부모 컨테이너의 공간을 나눠 가지는 역할을 수행할 때 사용됩니다. flexDirection 스타일 속성 React-Native는 flexDirection의 기본값이 'height'이기 때문에 위의 그림에서 TopBar의 컨테이너를 'row'로 나누고 flex의 비율을 1씩 할당한 것입니다. 또한 Content 부분은 비율을 각각 1 2 3 으로 차등 분배..
React-Native ( style 속성과 StyleSheet API 이해하기) - part2
1. 자원과 아이콘 사용하기 $ npm i react-native-vector-icons react-native-paper color faker $ npm i -D @types/color @types/faker $ npm i -D @types/react-native-vector-icons /* eslint-disable */ import React from 'react'; import { SafeAreaView, StyleSheet, Text, Platform, Dimensions, View, ImageBackground, } from 'react-native'; import {Colors} from 'react-native-paper'; import Color from 'color'; const {wi..
React-Native ( style 속성과 StyleSheet API 이해하기) - part2
1. 자원과 아이콘 사용하기 $ npm i react-native-vector-icons react-native-paper color faker $ npm i -D @types/color @types/faker $ npm i -D @types/react-native-vector-icons /* eslint-disable */ import React from 'react'; import { SafeAreaView, StyleSheet, Text, Platform, Dimensions, View, ImageBackground, } from 'react-native'; import {Colors} from 'react-native-paper'; import Color from 'color'; const {wi..