React Native를 배우게 되었다.
기본 전역 세팅
- 터미널에서
npm install --global eas-cli명령어로 expo 기본 세팅을 전역으로 설치한다.
리액트 네이티브 프로젝트 기본 세팅
npx create-expo-app .(‘ . ‘은 현재 폴더를 뜻한다.)
또는,
npx create-expo-app rn-prac(터미널로 현재 위치에 rn-prac 폴더 생성)
실행
- npm start - 실행. (프로젝트 폴더에서.)
배포
- eas update - 배포. (프로젝트 폴더에서.)
배포를 해줘야 expo 앱에서 볼 수 있다.
styled component, async-storage
native에서 styled component를 사용하려면 사용하려는 프로젝트에서 아래를 설치한다.
npm install @emotion/react @emotion/native
native에서 localstorage 같은 storage를 이용하려면 프로젝트에서 아래를 설치한다.
npm install @react-native-async-storage/async-storage
React와 다른 React Native.
React Native에서는 diplay: flex와 flexDirection: 'column'이 기본값이다.
글을 넣으려면 <Text>를 사용해야 한다.
ex) <Text>이건 React Native</Text>
<Image source={ require( ‘ 경로 ’ ) } /> - ( require )는 폴더 안의 이미지를 불러올 때.
<Image source={ uri : ‘ 경로 ’ } /> - ( uri ) 외부 이미지를 불러올 때. (크기 조절 확인!)
onChange = onChangeText
onChangeText의 인자로 event.target을 사용할 필요가 없다.
자동으로 value를 찾아간다.
ex)
onChangeText = (text) => {
setText(text);
}
---
onClick 대신 onPress를 사용한다.
onSubmit 대신 onSubmitEditting을 사용한다. (새로고침되지 않는 게 default)
React Native의 예외
<ScrollView />를 쓸 때는 style 사용불가.
contentContainerStyle을 사용해야 한다.
<ScrollView contentContainerStyle={styles.container}>
인라인으로 스타일주기
인라인으로 스타일을 주려면 아래처럼.
style={[
styles.tap,
item.isDone ? {textDecorationLine: "line-through"} :null,
]}