1. Pressable과 터치 영역

Pressable을 사용할 때,

이것을 고려하여 hitSlop과 pressRetentionOffset을 꼭 설정해주도록 하자.(PressRect의 범위는 HitRect의 범위 끝에서부터 시작됨)

2. 스타일링 방법 3가지

RN에서 각 컴포넌트를 스타일링하는 방법에는 크게 3가지가 있다.

(1) 인라인 스타일링

<View 
  style={{ 
    flex: 1,
    backgroundColor: '#fff',
    ...
  }}

이런 식으로 컴포넌트의 style 프로퍼티에 바로 스타열 정보가 담긴 객체를 설정하는 것이다. 하지만 동일한 스타일을 가진 경우에도 똑같은 내용을 또 써줘야한다는 단점이 있다.

(2) 클래스 스타일링

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

<View style={styles.box}>
...
const styles = StyleSheet.create({
  box: {
    flex: 1,
    backgroundColor: '#fff',
    ...
  }
})

일단 이 방식은 스타일 객체에 이름이 있으므로 의미를 더할 수 있고, 똑같은 스타일을 또 작성할 필요가 없다는 장점이 있습니다.

그리고 여기서 한 가지 더 기억해야하는 점이 있는데 일단 클래스 스타일은 여러 개를 적용할 수 있다는 점입니다.

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

<View style={[styles.box, styles.error]}>
...
const styles = StyleSheet.create({
 box: {
   flex: 1,
   backgroundColor: '#fff',
   ...
 },
 error: {
   flex: 2,
   backgroundColor: 'red'
 }
})

이렇게 하면 현재 배열에 있는 styles.box, styles.error가 모두 적용되고 이때 뒤에 있는 스타일 객체의 속성 중 앞의 것과 겹치는 것이 있다면 뒤에 있는 것이 앞의 것의 값을 덮어쓰게 됩니다.

참고로

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

<View style={[styles.box, { backgroundColor: 'red'}]}>
...
const styles = StyleSheet.create({
  box: {
    flex: 1,
    backgroundColor: '#fff',
    ...
  },
  error: {
    flex: 2,
    backgroundColor: 'red'
  }
})

클래스 스타일링과 인라인 스타일링을 이런 식으로 섞어서 쓸 수도 있습니다.

(3) 스타일드 컴포넌트

웹에서 사용하던 CSS 방식으로 스타일링을 하는 방법입니다. RN의 스타일 관련 프로퍼티들을 보면 하이픈이 없고 모두 카멜 표기법으로 되어 있고, 단위가 생략되어 있습니다. 만약 웹 개발을 하던 사람들이라면 원래 방식대로 작업하고 싶을 수도 있는데요. 이럴 때

npm install styled-components

로 이 패키지를 설치하고

const customView = styled.View`
  flex: 1,
  background-color:'#fff',
`
...

이런 식으로 스타일을 입힐 수 있습니다. styled.컴포넌트` 스타일 ` 이런 방식으로 컴포넌트를 나타냈다는 것을 알 수 있습니다. 여기서 이런 응용 기법도 사용할 수 있습니다.

(1) css 객체를 만들어서 활용하기

const background = css`
  background-color: '#fff'
`;

const customView = styled.View`
  ${background}
`;

(2) 이미 만든 스타일드 컴포넌트를 상속받아 새로운 스타일드 컴포넌트 만들기

const customView = styled.View`
  flex: 1,
  background-color:'#fff',
`;

const customChildView = styled(customView)`
  margin: 20px;
`;
...

상속을 할 때는 styled(부모 컴포넌트)` 스타일 ` 이런 식으로 작성합니다.

그런데 만약 컴포넌트에 전달된 props에 값에 따라 다른 스타일 속성이 적용되어야 한다면 어떻게 해야할까요?

const customView = styled.View`
  flex: 1,
  background-color: ${props => props.customType === 'success' ? '#FFF' : '#000'}
`

이런 식으로 쓰면 됩니다.

스타일드 컴포넌트에는 ThemeProvider라는 게 있는데요. 모든 컴포넌트를 감싸는 최상위 컴포넌트로 ThemeProvider를 지정하면 어떤 자식 컴포넌트든 props로 theme을 전달받아 사용할 수 있습니다.

예를 들어 이런 theme.js 파일이 있고,

// thems.js
export const lightMode = {
  background: '#fff'
}

export const dartMode = {
  background: '#000'
}

이런 CustomView.js가 있다고 할 때

// CustomView 
export const CustomView = styled.View`
  background-color: ${dartModeOn ? props.theme.darkMode : props.theme.lightMode} 
`;

main.js 파일에서는

// main.js 
import { lightMode, darkMode } = from './theme';

const [darkModeOn, setDartkModeOn] = useState(false);

const App = () => {
  return (
    <ThemeProvider theme={ darkModeOn ? darkMode : lightMode }>
      <CustomView />
    </ThemeProvider>
    );
}

이런 식으로 다크 모드 테마와 라이트 모드 테마를 손쉽게 관리할 수 있습니다.
ThemeProvider는 내부적으로 Context API를 사용합니다.

3. SafeAreaView와 StatusBar

iOS 폰 중에는 위에 노치 디자인이 있는 기기들이 많다. RN에서는 자동으로 패딩 값을 주는 SafeAreaView를 제공한다.

그리고 안드로이드에서 상태 바 관련된 스타일을 제어하려면 StatusBar 컴포넌트를 사용하면 된다.