[React Native] Expo , UI 작성하기/스타일링

Core Components를 이용한 UI 작성하기

https://reactnative.dev/docs/components-and-apis#user-interface

Core Components and APIs · React Native

Core Components 

📌 SafeAreaView

장치의 안전 영역 경계 내에서 콘텐츠를 렌더링한다.

iOS 기기에만 사용 가능

 

📌 StatusBar

앱의 상태 표시줄을 제어하는 구성 요소

일반적으로 화면 상단에 있는 영역 (현재 시간, 배터리 잔량, 기타 상태 아이콘)

<SafeAreaView>
  <View>
    <StatusBar barStyle={'default'} />
    <Text>ToDo App</Text>
    <View>
      <Text>할 일</Text>
    </View>
    <View>
      <Text>완료된 일</Text>
    </View>
  </View>
</SafeAreaView>

 

리액트 네이티브 스타일링

CSS가 아닌 JavaScript로 스타일링을 한다. 

카멜케이스를 이용해야 한다 ( ex. backgroundColor )

https://reactnative.dev/docs/style

Style · React Native

 

스타일링 하는 방법

1. inline Styles

<Text style={{ marginBottom: 35 }}> ToDo App </Text>

 

2. StyleSheet 객체 사용

<Text style={styles.pageTitle> ToDo App </Text>

const styles = StyleSheet.create({
   pageTitle: {
    	marginBottom: 35,
   }
});

스타일링 코드를 분리해줘서 전체 소스 코드의 가독성을 좋게 해준다.

이미 정해놓은 스타일을 캐시 해주기 때문에 다시 렌더링 할 때 inline styles을 사용할 때보다 성능이 좋다.

리액트 네이티브 레이아웃 - Flex

항목이 주 축을 따라 사용 가능한 공간을 채울 방법을 정의한다.

각 요소의 flex 속성에 따라 공간이 분할된다.

https://reactnative.dev/docs/flexbox

Layout with Flexbox · React Native

 

📌 KeyboardAvoidingView

가상 키보드에서 벗어나야 하는 뷰의 일반적인 문제를 해결하기 위한 구성 요소로

키보드 높이에 따라 높이, 위치 또는 아래쪽 패딩으로 자동으로 조절할 수 있다.

behavior 

- height : 뷰의 높이 자체를 변경

- position : 뷰의 위치를 설정

- padding : 키보드가 열렸을 때 뷰 하단의 패딩을 설정

오른쪽 사진 :  KeyboardAvoidingView 사용

 

📌 Pressable

다양한 프레스 상호 작용 단계를 감지할 수 있는 핵심 구성 요소 래퍼

https://reactnative.dev/docs/pressable

Pressable · React Native

 

 

- onPressIn : 프레스 활성화 될 때

 

- onPressOut : 누르기 제스처가 비활성화될 때

 

- onPress : 사람이 손가락을 떼면 OnPressOut 다음에 실행

 

- onLongPress : 손가락을 떼기 전에 손가락을 500ms이상 두면 실행 

 

 

 

 

 

 

📌 HitRect

터치가 등록될 수 있는 거리를 정의할 수 있다.

사용자가 실수로 잘못된 요소를 활성화하거나 활성화 영역을 놓치는 경우가 많기 때문

<Pressable 
    hitSlop={10}
    style={styles.itemCheckbox}
>

 

 

 

 

리액트 네이티브 디버거를 열어서 영역을 확인할 수 있다.

iOS : cmd+D

Android : cmd+M

윈도우 : Ctrl + M

리액트 네이티브 SVG 

기본적으로 SVG 파일을 지원하지 않기에 설정 및 구현을 해줘야 한다.

1. react-native-svg 모듈 설치

svg 요소나 속성들을 React Native에서 사용할 수 있게 해준다.

npm install react-natvie-svg

 

2. react-native-svg-transformer 모듈 설치

svg 파일을 import 해서 사용할 수 있게 해준다

npm install -D react-native-svg-transformer

https://www.npmjs.com/package/react-native-svg-transformer

react-native-svg-transformer

 

3. svg 파일 다운로드 후 aseets 폴더에 추가

https://www.svgrepo.com

SVG Repo - Free SVG Vectors and Icons

 

 

 

참고

인프런-따라하며 배우는 리액트 네이티브 기초

https://reactnative.dev/docs/intro-react-native-components