내일배움캠프 4기 React 44일차(React Native, eas)

1. Expo

expo 를 이용하여 모바일 상에 어떤모습인지 바로바로 업데이트하여 확인 가능!

https://expo.dev/

expo 사이트 회원가입 후

New Project 생성

yarn , npm 을 통해 -global eas 다운받기

npm install -g eas-cli

yarn global add eas-cli

//에러시 앞에 sudo

expo 계정으로 로그인

EXPO에서 진행하라고 하는 단계로 App 생성하기

vscode 로 폴더 연 후에

npm start. or yarn start.

eas update 해주기.

2. React Native 간단 UI

React Native 는 style 은 js 와 거의 같으나

폼태그가 좀 다르다.

<div></div> == <View></View>
  
<input/> == <Textinput/>
  
<div>하나둘셋<div> == <View><Text>하나둘셋<Text><View>

• 핸드폰의 윗부분 날씨, 시간 바 나 노치등을 피하기 위해 쓰는 태그

 <SafeAreaView style={styles.container}>
 // 이 안쪽에 내용이 들어감.
 // safeAreaView 는 가장 겉 태그, import 해야함.
 // style 이 container 를 줘야 안의 내용을 감싸 적용이 된다.
 </SafeAreaView>

• 스크롤 태그

<ScrollView></ScrollView>
// ScrollView 태그 안에 들어가는 것들은 스크롤이 가능함!
// Web은 자동으로 스크롤 기능이 들어가지만 native는 친절하지 않음 ㅎ..