2021-07-17 :: React Native; Design

Style

리액트 네이티브에서는 JS를 이용해 어플리케이션을 스타일링한다. 모든 컴포넌트는 style이라는 prop을 가진다. style의 이름과 값은 카멜 표기법이 적용된다는 점을 제외하면 CSS와 흡사하다.

컴포넌트가 복잡해지면 아래 코드 컨벤션과 같이 StyleSheet.create를 이용하는 것이 편리하다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const LotsOfStyles = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

Height and Width

fixed dimensions

컴포넌트의 치수를 결정하는 가장 일반적인 방법은 width, height 값을 부여하는 것이다.

컴포넌트의 사이즈가 항상 일정해야하는 경우에는 이러한 방법이 효과적이지만 스크린 사이즈와 관계없이 렌더링이 되기 때문에 문제가 발생할 수 있다.

flex dimensions

컴포넌트의 스타일 props에 flex를 부여하면 컴포넌트는 가용한 공간 내에서 확장되거나 축소된다. 일반적으로 flex: 1을 부여한 경우 해당 컴포넌트는 가용한 공간을 모두 차지할 것이다. 이 크기는 부모컴포넌트의 크기를 기준으로 하며 해당 값의 가중치는 형재 컴포넌트와의 상대적 크기차이를 의미하기도 한다.

percentage dimensions

flex를 사용하지 않고 화면의 특정 부분을 채우는 다른 방법이 있다. 바로 percentage 값을 조작하는 방법이다. 이 방법은 flex와 같게 부모컴포넌트의 고정된 크기를 필요로 한다.

Layout with Flexbox

컴포넌트는 flexbox를 이용해서 해당 컴포넌트의 자식의 레이아웃을 설정할 수 있다. flexbox는 다양한 스크린 사이즈에 획일화된 레이아웃을 제공한다.

flex

flex는 가용 가능한 공간을 얼마만큼 차지할 것인가를 결정한다.

style={[
  styles.button,
  selectedValue === value && styles.selected,
]}

위 코드와 같이 &&앞이 참이면 뒤에 styles.selected 클래스가 부여된다.

Flex Direction

키워드 flexDirection에 column, row 와 같은 값들을 부여해서 요소들의 나열 형태를 결정할 수 있다.

<View style={[styles.container, { [label]: selectedValue }]}>
  {children}
</View>

Layout Direction

키워드 direction에 ltr, rtl와 같은 값들을 부여해서 요소들의 위치를 정할 수 있다.

Color Reference

https://reactnative.dev/docs/colors