221229 TIL

React.js + React-dom => Web App

React.js + React Native(Bridge/JSI, etc) => Native Mobile Apps (iOS / Android)

 

React Native

우리가 쓰던 div 태그가 native에선 View 컴포넌트로 쓰고

native에서 쓰는 UI 컴포넌트는 import를 해와야한다.

View는기본적으로 display = flex 속성을 가진다.

그리고 기본 방향이 세로방향(위->아래)이다.

문자열을 쓸 때는 Text 컴포넌트로 감싸주어야 한다. (=p 태그)

로컬에 있는 이미지를 불러올 때 Image 컴포넌트를 쓰고 src 대신 require라는 함수를 써야 이미지를 불러올 수 있다.

웹 이미지를 불러올 때는 source={{uri: 이미지 주소]} 이렇게 써주어야 한다.

<Image source={require('./assets/splash.png')} />

onChange -> onChangeText로 쓴다.

event 객체는 브라우저에서 쓰는 이벤트이므로 native에선 없음.

// 원래 쓰던 onChange 함수 로직
const onChangeText = (e) => {
        setText(e.target.value)
    }

// native에서는 onChangeText
const onChangeText = (text) => {
        setText(text);
    };

native에서는 스크롤을 설정해줘야 스크롤이 생긴다.

<View> 대신 <ScrollView>를 쓰고 ScrollView를 쓸 때 원래 쓰던 style={}로 쓰는게 아니라

contentContainerStyle이라고 써줘야한다.

 

상단바에 글자가 겹쳐서 SafeAreaView를 쓰면 된다고 하던데 나는 계속 안돼서 찾아보니

iOS만 지원된다네..안드로이드는 직접 설정해줘야한다고 한다...ㅎ

 

 

리덕스 보충강의

dispatch를 store에 던져준다.