React-Native 기초 다지기

dongha1992·2020년 12월 27일
0

react-native

목록 보기
2/5
post-thumbnail

기본 컴포넌트

  • numberOfLines

<TEXT/>를 한 줄로 만든다!

  • Image

uri로 외부 uri를 가져온다.

안녕 사자

  • Button

  • Alert!

Alert이라는 컴포넌트로 이렇게 커스터마이징이 가능하다!

  • 크로스 플랫폼

이렇게 플랫폼에 따라 다르게 스타일을 줄 수 있다.

  • useDimensions

hooks를 이용해서 스크린의 길이를 구할 수 있다!

  • useDeviceOrientation

가로로 바뀌었을 때의 styles을 반응형으로 만들 수 있다!

기본 스타일

  • flex

flex는 비율이다. 0.5로 지정하면

이렇게 반만 나온다.

이렇게 View 3개에 각각 flex를 1을 주면

영롱한 친구가 된다.

  • flexDirection

이제 감싸고 있는 <View/>에 row를 주면

이렇게 변한다! 기본적으로 flex-direction이 react과 반대라고 생각하면 된다.

  • flexWrap

이런 상태에서는 flexWrap을 주면 된다!

position

react-native의 모든 컴포넌트는 기본이 relative다!

TouchableWithoutFeedback

키보드가 올라왔다가 다른 곳을 클릭시 내려간다.

font 사용

폰트는 이렇게 쓰는데 에러 나서 확인을 못 했다 후후

출처 : https://www.youtube.com/watch?v=0-S5a0eXPoc&t=6067s

profile
글과 코드와 사람에 관해 생각합니다.

0개의 댓글