728x90 반응형 React Native12 [RN] Style weather App을 만들기 위한 Style과 container들을 구현하려고 한다. 1.Style Sheet 사용하기 이걸 StyleSheet을 이용하면 ++) expo 새로고침 안될때 콘솔창에 r을 누르면 된다! 콘솔창에 m을 누르면 메뉴가 뜨는데 많은 옵션을 보여준다. 핸드폰을 흔들어도 메뉴가 뜬다! 2.Container 구현하기 이제 View에 배경색을 줘볼 것이다. 서울 text를 갖는 View 하나랑, 서울의 날씨를 알려주는 weather View 하나를 만들것이고, 전자와 후자의 비율은 1:3으로 줄 것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import { StyleShee.. 2022. 5. 13. [RN] Layout Flex Box RN의 flex box는 웹에서 작동하는 것이랑 비슷하다. 우선 RN에 없는건 display:block display:inline-block display:grid 가 없다. 그래서 flex box만 하면 된다. 우선 박스들의 기본 값은 상자들이 세로로 위에서부터 일렬로 배치되어있다. 근데 이걸 가로로 정렬하고 싶으면 어떻게 해야할까?? 1.View에 Flex Container가 되라고 말할 필요가 없다. 맨위에 View 컴포넌트의 속성에 flexDirection을 "row"로 지정하면 된다. 웹에서는 display:flex를 한다음에 flex-direction을 설정해줬었다. 하지만 RN에서는 Contatier View가 이미 Flex Container이다. 즉 모든 View가 Flex.. 2022. 5. 9. [RN] React Native rules 1.RN은 웹사이트가 아니다. -> 사용 RN은 웹사이트가 아니기 때문에 태그를 쓸 수 없다. 대신 태그는 쓸 수 있다. 는 container이고 모든 것은 다 View로 만들게 될 것이다. 그래서 항상 import 해야한다. 2.RN에 있는 모든 text는 text component에 들어가야 한다. Hello 이런식으로! 3. View 에는 style이 있다. 그러나 웹에서 사용하던 모든 속성들을 사용할 수 없다. 예를 들면 border같은거 하지만 CSS의 98프로 정도는 사용가능하다! StyleSheet.create는 object 이다. 이 친구의 기능은 1.아주 좋은 자동 완성기능을 제공한다. 2.스타일 component를 정리하는데도 유용하다고 한다. 그러나 얘가 반드시 필요한 것은 아니다.... 2022. 5. 6. [RN] RN을 들어가기 전에! 리액트 네이티브를 공부하기 전에 react 선수지식으로는 state,useState,useEffect,props가 있다. 리액트 네이티브의 작동원리 리액트 네이티브는 js로만 이루어지지 않는다. 오히려 js는 상대적으로 RN에서 그리 중요하지 않은 부분이다. bridge들을 통해 코드가 운영체제와 통신을 할 수 있도록 하는 인프라 시설이 중요하다.그리고 RN앱을 다운 받을 때는 이런 기본 인프라 시설이 있는 앱을 다운받는 것이다. RN앱은 쉘과 같다. js코드를 넣고 운영체제와 대화하는 것이다. 그렇기에 앱을 컴파일 시켜주는 시뮬레이터인 java와 xcode가 필요한것이다. 모든 준비가 되어있을 때 안드로이드의 경우 java가 인프라 시설들을 가져와서 apk안에 넣어주고 플레이스토어에 보내지는 것이다! .. 2022. 5. 2. 이전 1 2 3 다음 728x90 반응형
