[TIL] 내배캠4기-React Native-60일차

ScrollView에 스타일 먹이기

<ScrollView contentContainerStyle={{width: "100%"}}>

스크롤 뷰 스타일은 contentContainerStyle로 적용한다. 팀원과 같이 강의를 보면서 메모했는데 막상 UI를 그릴 땐 왜 생각이 안나..?

<ScrollView style={}>

당연히 render에러가 떴고, 아 스크롤뷰에서는 스타일 적용이 안되나보다~ 하고있었다;;

아이폰 노치 밑으로 나오게

<SafeAreaView>
제일 최상위에 해당 컴포넌트를 적용해두면, 노치 밑으로 화면 레이아웃 UI를 적용시킬 수 있음.

버튼 속성

<Button> 에는 무조건 title prop이 있어야 한다.

Ex) <Button title=“저장“/>

onClick 대신 onPress로 사용

이미지 속성

<Image>를 붙히려면, import 해줘야 한다.
import { Image, StyleSheet, Text, View } from “react-native”;

인라인스타일에 fontSize: 30 ⬅️ 단위 생략 가능, 대신 문자열로 쓰면 안됨

require 메서드 : 이미지를 불러 올 때 사용

<Image source={require("./assets/favicon.png")}
style={{ width: 100, height: 100 }}
/>

컴포넌트 내부에서 CSS 작성 시 자동완성이 되려면

📌 emotion 라이브러리 사용

npm install @emotion/react @emotion/native
yarn add @emotion/react @emotion/native
StyleSheet.create() : 리액트 네이티브에서 쓰는 문법으로 자동완성 제공해줌

const styles = StyleSheet.create({
alignBox: {
 alignItems: "center",
 justifyContent: "center",
},