ScrollView
-
복습 겸, 공부 겸 메인화면을 다음 화면처럼 바꾸어보자! flex는 flex 1과 flex 5로 화면이 나눠져 있다면 flex 1인 곳은 6/1 그리고 flex 5인 것은 6/5로 이렇게 화면을 분할해서 생각하는 개념으로 화면의 구역을 나누는 기술이다. 상단에 '나만의 꿀팁' 제목 텍스트를 넣어야 된다. 목 바로 밑에 이미지를 해당 이미지를 넣어야 된다. 가운데 버튼은 횡(수평) 스크롤(ScrollView) 기능을 써서 좌우로 스크롤 가능하게 만들어야 된다. ScrollVoew 수직 스크롤은 그냥 쓰면 된다는 것을 알았지만 횡은 어떻게 해야 할까? 공식문서를 찾아보고, 수평은 영어로 Horizontal. 주어진 데이터는 문자이므로 Text 태그에 넣어야 된다. 설명 글은 긴데 3줄이 넘어가면, 말 줄임표..
앱 화면 만들기 메인화면 꾸미기복습 겸, 공부 겸 메인화면을 다음 화면처럼 바꾸어보자! flex는 flex 1과 flex 5로 화면이 나눠져 있다면 flex 1인 곳은 6/1 그리고 flex 5인 것은 6/5로 이렇게 화면을 분할해서 생각하는 개념으로 화면의 구역을 나누는 기술이다. 상단에 '나만의 꿀팁' 제목 텍스트를 넣어야 된다. 목 바로 밑에 이미지를 해당 이미지를 넣어야 된다. 가운데 버튼은 횡(수평) 스크롤(ScrollView) 기능을 써서 좌우로 스크롤 가능하게 만들어야 된다. ScrollVoew 수직 스크롤은 그냥 쓰면 된다는 것을 알았지만 횡은 어떻게 해야 할까? 공식문서를 찾아보고, 수평은 영어로 Horizontal. 주어진 데이터는 문자이므로 Text 태그에 넣어야 된다. 설명 글은 긴데 3줄이 넘어가면, 말 줄임표..
2022.09.08 -
처음부터 빈 페이지에 그림을 그려 나가려는 습관보다는 잘 짜여 있고, 존재하고 있는 좋은 코드들을 가져다가 잘 조합해서 쓰고, 이 코드들을 가지고 잘 응용하는 게 제일 중요하다. 화면의 영역(레이아웃)을 잡아주는 엘리먼트이다. 현재 App.js 상에서 View는 화면 전체 영역을 가진다. 우리는 이 View 엘리먼트로 다음과 같이 화면을 원하는 대로 분할할 수도 있다. 더보기 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles ..
앱 화면 만들기 화면을 구성하는 엘리먼트들처음부터 빈 페이지에 그림을 그려 나가려는 습관보다는 잘 짜여 있고, 존재하고 있는 좋은 코드들을 가져다가 잘 조합해서 쓰고, 이 코드들을 가지고 잘 응용하는 게 제일 중요하다. 화면의 영역(레이아웃)을 잡아주는 엘리먼트이다. 현재 App.js 상에서 View는 화면 전체 영역을 가진다. 우리는 이 View 엘리먼트로 다음과 같이 화면을 원하는 대로 분할할 수도 있다. 더보기 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles ..
2022.09.07