7 _ 2 . ReactNative _ Text , Vie w / StyleSheet _ ReactNative . LayoutSystem / Expo SDK , ReactNative APIs

 # Ho _ dev # js # ReactNative

본 기록은 Snack Expo를 이용하여 작성하였습니다.

1.React Native Structure 리엑토네이티브에서는 기본 React와 유사한 구성이 많다.

우선 이렇게 Import를 하고 작업을 시작하는 것도 마찬가지이다.React를 Import 해와야 작업할 수 있다.네이티브에서는 기본적으로 {Text, View}를 이용하고 {Style Sheet}를 주요하게 이용한다.그 밖에 expo로 제작한 컴포넌트도 이용한다.

View는 웹에서 사용하던 div와 비슷한 역할을 한다. 구획 구분 기능을 하는 Text는 웹에서 사용하던 p나 span과 같은 기능을 한다. Text를 넣을 수 있다.해당 코드 내에서 style 플랩을 넣어서 스타일을 적용 시킬 수 있다.주로 플랩의 이용을 기본으로 하며, 플랩을 불러들여 적용하는 방법 직접 플랩으로 작성하는 방법 두 가지가 이용되고 있다.
해당 방법은 플랩을 읽고 작성할 때 플랩을 만드는 방법이다.기본적으로는 StyleSheet 를 사용한다.이유는 Style Sheet를 이용하면 자동 완성 기능들이라던가 여러 유용한 기능들이 안에 제공되기 때문이다.플랩 작성이 끝나면 컴포넌트 코드 안에 넣는 방식으로 진행된다.위와 같은 경우는 styles 안의 container이기 때문에 {styles.container}라는 플랩으로 호출할 수 있다.
당연히 Style Sheet를 사용하지 않아도 적용 가능하다.2 . ReactNativeLayoutsystem
리엑토네이티브는 기본적으로 웹과 비슷하지만 상당히 다른 점이 있다. 몇 가지 특징을 살펴보자.
특징.1 flex를 비율로(상대적으로) 표현한다.확인해보자.

위와 같이 가장 상위에 있는 V iew에서 flex는 1배(100%)로 표현되며 하위에 있는 3개의 View가 각각 1개씩의 파이를 차지하고 있다. 즉, 하나의 View당 33.33%를 차지하고 있는 샘물이다.
마치 하나의 파이를 나누듯이 기존 웹에서 px로 표현했다면 여기서는 비율로 표현하는데 훨씬 구성하기가 쉽다.다른 예를 들어보자.

해당처럼 각 View가 상위 V iew를 3:8:1 비율로 나눠 먹고 있다.

해당과 같은 경우는 상위 V iew가 각각 2:1씩 파이를 나누고, 그 중에서도 3:8:1로 나눌 수 있도록 구성했다.

특징.2 웹과 달리 colum이 기본이다.위의 이미지와 같이 flex direction을 colum으로 설정하지 않아도 기본적으로 colum 이다.

이와 같이 flex Direction을 "row"로 설정했을 경우에 row로 표현됨을 알 수 있다.
3 . ReactNative / Expo _ APIs , SDK
리엑토네이티브로 Status Bar는 2 종류 있다.From . ReactNativeFrom . Expo
두 가지 이유에 대해 살펴보자.
일반적으로 사용되는 Status Bar이다.일반적으로 vsc에 React Native pkg을 설치하면 expo-status-bar로 Import 하는 것을 볼 수 있다.

이처럼 엑스포에서 가져온 Status Bar는 light라는 코드로 색상을 지정할 수 있다.
https : // docs . expo . dev / vers ions / latest / sdk / status - bar / Expo is an open - source platform for making universal native apps for Android , iOS , and the web with JavaScript and React . docs . expo . dev 해당 링크에서 확인 가능 하다 .
실제로 Status Bar는 React에서 독자적으로 지원하는 것도 있다.

https:/reactnative.devdocs statusbar Component to control the appstatus bar.reactnative.dev상의 링크에서 자세한 내용은 확인할 수 있다.
이와 같이 리엑트가 자체적으로 만든 API도 있지만 이를 하나하나 React로 관리할 수 없기 때문에 Component를 간소화하는 작업을 해왔다.
그 때문에 기존에 사용하던 async Storage와 같은 유용한 기능을 React 자체가 제공하지 않는다는 단점이 생겼다.거기서 Expo로 SDK 패키지를 제공한다.
우리가 지금까지 expo-cli를 주입한 결정적인 이유도 해당된다.expo-cli 를 설치하면 기본적으로 expo SDK 가 설치된다.
아래 링크로 다양한 expo에서 제공하는 APIs를 확인할 수 있으므로 확인해 보자.https : / docs . expo . devversionslatestExpoisanopen - sourceplatform for making universal nativeappsforAndroid , andtavaS . with J .

이 블로그의 인기 게시물

식객 허영만의 '백반기행' 이창원이 찾은 대구맛집 온돌방

이미지
  식객 허영만의 백기행 이창원이 찾아간 대구맛집 온돌방을 다녀왔습니다. 평일 아침 일찍 송해공원에 들렀어요.찬트카페가 생겼다는 소식을 듣고 팬으로서 도저히 가지 않는 걸 참을 수가 없어요.ㅜ 급하게 사람이 없을 때만 보고 오려고 했는데 우째우째 점심까지 먹고 오셨는데요.#찬스카페 포스팅은 따로 올리도록 해주세요:) 장소는 골목 입구에 한식 반자구이, 온돌 간판이 보이는 곳에서 건너편 골목 25m 안쪽에 있었어요. 식객 허영만의 백반기행 이창원이 찾은 대구맛집 온돌방 주차장은 골목길 맨 끝에 있는 모닝원룸에 주차하면 된답니다.▶ 위치 : 대구 중구 동성로12길 72-9 <지번> 대구 중구 공평동 94-5 (중앙로역 3번 출구에서 613m) ▶ 운영시간 : 매일 11:30 - 21:30 대구광역시 중구 동성로12길 72-9 일단 저희는 차를 타고 이동했기 때문에 골목골목을 얼마나 돌아다닐 수 있었는지 몰라요. 차로 이동하면 대구시청 건너편 골목 안으로 들어가는 것이 가장 편하지 않을까 생각합니다. GS파크24 (GS타임즈대구 동문동 제3주차장-대구중구 공평동 105)유료주차장이 30분에 1,000이여서 저희는 1시간 동안 주차하고 2,000을 결제하셔야 했습니다. 대구광역시 중구 공평로8길 11 예쁜 사람들의 따뜻한 사랑바 "벽가나무집" 온돌방 :) 농림축산식품부에서 제공하는 안심식당으로서 '먹을 수 있는 도구의 비치·제공', '위생적 수저 관리', '종사자 마스크 착용'을 준수하고 있어 소재지 지자체로부터 인증을 받은 음식점이라 안심이 되었습니다. 가수 이창원이 식객 허영만의 정식 기행에 출연한다는 소식을 듣고 찬스카페를 다녀온 김에 당일 예약한 뒤 맛있게 먹고 왔죠. 올해 26살의 이창원이 최근 백년대행을 찾은 샤이니 민호가 세운 최연소 식객 기록을 경신했다고 합니다. 나중에 들으니까 백정 원셰프도 갔던 곳이기에 대구의 맛집이구나라고 생각했습니다. 저희가 식사했던 옆의 별채에서 백종원 씨...
자세한 내용 보기

청주 삼겹살 맛집 수곡동 대솔정육점 생고기

이미지
 청주 삼겹살 맛집 수곡동 대솔정육점 생고기달려라 뽀띠입니다오늘은 청주 수곡동에 위치한 삼겹살 맛집으로 아주 유명한 대솔정육점 생고기집 냠냠이의 솔직한 리뷰를 들려드리겠습니다! 곧 시작하겠습니다!친구하고 저녁을 먹기로 했어요.먹기 좋은 친구가 아주 맛있는 생고기 삼겹살 맛집이 있다고 추천해 주었습니다.궁금해서 방문했습니다.충청북도 청주시 서원구 수영로47번길 51 대솔정육생고기 043-285-0478 충청북도 청주시 서원구 수곡동 43-8번지도착한 청주 수곡동 대솔정육점의 생고기 식당.영업시간은 저도 몰라요. 구 법원 사거리에서 무심천 쪽 골목에 위치해 있는데.외모는 초라하고 이런 곳에 식당이 있을까? 그랬는데...들어가자마자 대박...웨이팅했어요 우리ㅋㅋ숨은 청주 삼겹살 맛집 인정! 대솔정육점에 메뉴가 있습니다.저희는 생삼겹살이랑 목살을 시켰어요국내산 암돼지 생고기만 판매한대요.주문하고 담소하다 보니 기본 반찬과 고기가 나왔습니다. 일단 첫 번째로 등장한 국내산 메스의 생고기와 삼겹살과 등심! 짱이죠?생고기라 역시 맛있을 것 같군요.그러면 가볼까요? 간장과 버섯 그리고 쪽파도 이렇게 같이 준대요간장은 모르시는 분들도 계시겠지만, 고기를 간장에 찍어 구워 먹는 용입니다! 파도 맛있겠네요 숙주무침과 나물무침, 그리고 도라지! 신선한 상추와 깻잎, 그리고 쌈장도 같이 준대요 김치와 물김치도 이렇게 나옵니다기본반찬도 먹기좋고 맛좋은 것만 쏙 나오는 청주삼겹살 맛집 대솔정육점 생고기집.본격적으로 고기를 구워볼까요? 청주에서만 볼 수 있는 간장소 식초에다 이렇게 고기를 붙여서 굽는 방법! 다른 분들에게는 문화적 충격일 텐데 여기서는 이게 유행이라 ㅎㅎㅎ 간장에 다른 처리? 해서 생각할 건 없어요. 호일로 싸인 철판에 불린 고기를 이렇게 올립니다!너무 맛있겠죠?마늘도 올릴게요! 노릇노릇 맛있게 구워요.끝냅시다. 잘 구워진 삼겹살을 입으로 호로록! 꺄!!!!!!!!!! 정말 부드럽고 맛이 좋아요. 냉동육이 아닌 국내산 암돼지 의 생고기만을 사용하기 때문에 더욱 맛이...
자세한 내용 보기

분당 롤렉스 중고시계 매입 수리도 가능...

이미지
 분당 롤렉스 중고시계구입..누군가 하나쯤은 가지고있는게 명품제품이지 않을까 싶습니다.며칠 전부터 친구가 옷장 안에 있는 롤렉스 중고시계를 사고 싶은데 어디가 좋은지 알려달라고 해서 얼마 전 누나와 한 번 찾아갔는데 매우 만족스러워하던 분당 락스에 다녀왔어요.친구랑 둘이 갔다왔는데 만족하더라구요. 수내역 1번 출구나 2번 출구로 나가시면 되는데2번 출구로 나가서 에스컬레이터를 타고 올라가면 고가도로가 있어요.차를 타고 간다면 행복시장에 갈 거예요. 대중교통을 이용하시면 5분 정도 걸리거든요.건물 안에 있으니까 호수만 기억하고 찾아가면 쉬울거에요.1층에 있습니다만, 어쨌든 부스가 많기 때문에 올 때마다 조금 고민하고 있었습니다.아이쇼핑을 하면서 찾는 줄 알았는데 힘들지는 않았어요. 울동네에는 중고 상점이 있고 우선 한번 만족한 가게라면 단골이 될 수밖에 없는 것이 싼 제품이 아니기 때문에 잘해주는 곳을 찾고 있습니다.세밀하게 관찰하고 깨끗하게 관리하는 곳이라 모든 신뢰를 받고 있습니다.우리는 친구들하고 가기 때문에 대중교통을 이용했는데 바로 도착하니까 힘들지 않았어요.입구에 다다랐더니 코로나 때문인지 유리문에 마스크 착용 안내 문자가 붙어 있었어요.유리 너머로 매장을 보면 세정제도 보이는데 왜 자꾸 가방이나 시계가 눈에 들어왔는지 모르겠어요. 출입구는 양쪽에 있어서 어느 쪽으로 들어가도 됩니다.한쪽 벽면에는 가방이 즐비한데 제가 좋아하는 샤넬과 구찌는 물론 브랜드도 많이 있어요.분당 롤렉스 중고시계를 사러 왔는데 진열장에 놓인 제품들을 보고 가슴이 뛴다고 합니다. 진열대 안에 있는 중고시계를 보면 신상품이라고 해도 믿을 정도로 너무 예뻤어요흠집 하나 보이지 않는게 라벨만 붙이면 새것인지 알았어요.그만큼 매일 관리를 한다고 합니다그중에서도 가장 핫한 것은 롤렉스였습니다.오래될수록 가치있다고 하여 소장하고 계신 분들이 꽤 많은 것이 아닌가 싶습니다. 캐주얼에 어울리는 심플 그런 것은 물론, 서브 마리너와 데이 저스트도 인기가 있는 이유가 있습니다.얼마나 눈에...
자세한 내용 보기