본문 바로가기

전체 글406

HybridApp-React Native 2세대 (Page 전환-react_navigation, 외부 라이브러리 추가 사용) - Home 화면에서 버튼을 누르면 Second 화면으로 전환된다. Second 화면에서 버튼을 누르면 Home 화면으로 전환된다. AVD를 켜두고, cmd창에서 작업할 경로까지 접근하여 init하자. react에서는 Page 전환이 없어서 라이브러리를 사용해야 한다. 라이브러리는 계속 바뀌고 있어서 (업데이트), 어제했던 예제가 오늘 안되곤 한다.. 우선 라이브러리 관련 사이트를 들어가 보자. https://reactnavigation.org/ React Navigation · Routing and navigation for your React Native apps Routing and navigation for your React Native apps reactnavigation.org GUIDES를.. 2020. 1. 22.
HybridApp-React Native 2세대 (ListView - SectionList) SectionList는 아래와 같이 필수 속성을 이용해야 한다. -sections -renderSectionHeader -renderItem -keyExtractor (필수는 아니지만 키값이 없을 경우 경고창이 나온다. 그것을 해결하기 위해 사용) - ListView를 이용해서 데이터를 보여준다. AVD를 실행시키고 , cmd창에서 작업할 경로까지 접근하여 initd을 하자. RN10SectionList폴더에 새 파일(Main.js)을 만들자. 임의로 대량의 데이터를 만들고, SectionList를 사용해보자. 해당 리스트를 클릭했을때, 해당 이름이 알림창에 나오도록 하자. 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 2.. 2020. 1. 22.
HybridApp-React Native 2세대 (ListView - FlatList) FlatList는 아래와 같이 필수 속성을 이용해야 한다. -data -renderItem - ListView - FlatList를 이용하여 데이터를 보여준다. 작업을 하기 전에 AVD를 실행시켜 놓자. cmd창을 이용하여 작업할 경로까지 접근하여 init 하자. 임의로 보여줄 데이터를 만들고 FlatList로 화면에 보여주자. 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 import React, {Component} from 'react'; import {View, Text, StyleSheet, FlatList}.. 2020. 1. 22.
HybridApp-React Native 2세대 (Layout 2, ListView를 안쓰고 이미지텍스트 배치) ListView가 있지만 그전에 ListView를 이용하지 않고도 배치하는 방법을 알아보자. 만들기 전에 AVD를 키고, 만들고자 하는 경로에 init하자. run을 해보자. 우선 화면에 그냥 흰색으로 나올 것이다. ScrollView 밖에 없으므로.. 이미지를 보여주기 위해 RN08ListLayout2 폴더에 images 폴더를 만들자. 그리고 거기에 임의로 이미지를 넣자. 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 import React, {Component} from 'react'; import {.. 2020. 1. 21.
HybridApp-React Native 2세대 (Layout) CustomComponent외의 참조변수, 메소드에 태그문을 넣어서 보여줄 수 있다. 작업 전에 AVD를 켜놓자. 이전 작업 때문에 현재 경로는 d:\HybridApp\ReactNative\RN06CustomComponent에 있다. 모든 예제는 ReactNative폴더에 만들것이기 때문에 해당 경로로 가서 명령어를 입력하자. RN07ListLayout을 만들자. 만든 폴더로 가서 run하자. CustomComponent를 사용하지 않고도 태그문을 사용할 수 있다. 메소드를 이용해서 태그문을 사용할 수 있다. 파라미터를 이용해서 값을 전달할 수 있다. 태그문을 담고있는 객체를 배열에 담아서 사용 가능하다. arr은 toString이 자동 호출되어서 배열이름을 사용하면 배열 요소들이 된다. 배열요소를 사용.. 2020. 1. 21.
HybridApp-React Native 2세대 (CustomComponent) 임의로 Component를 상속받은 클래스를 만들어서 태그문을 안에 넣고 편하게 화면에 보일 수 있다. init하기 전에 AVD를 켜놓자. MainComponents.js 에있는 changeMessage 메소듣 onPress로 전달하자. MyComponent2.js에서 받은 메소드는 해당 버튼을 누르면 실행하게 된다. 새로운 파일을 추가하여 새로운 Component를 만들어보자. 만약 값을 전달할때 값을 누락해서 보내면 어떻게 될까? 결론, color,onPress는 상관없다.. 그러나 title을 쓰지 않으면 에러 값을 전달되지 않았을시 에러를 막기 위해, 값이 없을시 해당 값을 우선 초기화 할 수 있다. 아까 title이 없는 버튼의 주석을 풀고 실행해보자. 에러가 나지 않는다. title이 없어도 .. 2020. 1. 21.
HybridApp-React Native 2세대 (Image) 이미지를 클릭 할 때마다, 이미지가 바뀐다. 이미지가 많아지면 밑으로 배치되어 볼 수가 없다. 스크롤뷰 안에 넣어서 스크롤로 볼 수 있다. 백그라운드 배경을 주는 속성이 따로 없다. 태그를 이용하자. 실행 전에 AVD를 실행해 놓자. 예제는 d:\HybridApp\ReactNative폴더에 만들 것이다 해당 경로까지 접속 후 init하자. MainComponent.js를 만들자. MainComponent.js가 화면에 보이기 위해 index.js에서 사용을 한다. 그리고 이미지르 사용할 것이기 때문에 images 폴더를 만들어서 거기에 이미지를 넣자. 이제 실행을 해보자. 원본 이미지가 커서 잘린다. 이미지의 너비, 높이 값을 주자. 너비와 높이 값을 주면 이미지의 비율이 깨질 수 있다. 현재 이미지는 .. 2020. 1. 21.
HybridApp-React Native 2세대 (Layout) flex를 이용하여 여러가지 배치를 연습해본다. 예제는 D드라이브에 HybridApp\ReactNative폴더에 예제 폴더를 만들어서 작업할 것이다. 해당 경로까지 접근하여 init하자. 명령어가 잘 실행되었다면 RN04Layoyt폴더가 생겼을 것이다. 배치를 연습하기 위해 네모를 만들어 보자. cmd창에서 만들어진 폴더까지 접속하여 run을 하자. 네모 두개를 추가 배치해보자. 배치에 대해서 스타일을 주지 않더라도 기본으로 flex-direction은 column이다 (수직배치) 비율로 배치를 해보자. 우선 flex:숫자를 쓰면 flex-gorws만 준 값이다. (월래 세개의 값을 줄 수 있다. flex:) 배치를 수평으로 바꿔보자. 중첩 구조를 연습해보자. index.js 1 2 3 4 5 6 7 8.. 2020. 1. 20.
HybridApp-React Native 2세대 (TextInput 입력칸에 글자 입력후 버튼으로 화면 갱신) TextInput에 입력한 값을 받아서 화면에 갱신해본다. 예제들을 d드라이브에 HybridApp에 모아두고 있다 그래서 해당 경로까지 가서 RN03TextInput 을 만들자. MainComponent.js가 화면에 나오도록 바꿔주자. 스타일도 적용해보자. 코드를 작성해다면, 우선 화면에 잘나오는지 확인해보자. TextInput을 화면에 배치하고 스타일을 주자. 입력된 글씨를 보여주기 윈한 변수를 만들자. 화면이 갱신되려면 state변수를 사용하자. 입력된 글씨를 보여줄 Text에 스타일을 주자. TextInput에 글씨가 바뀌었을때, 반응하는 onChangeText를 이용하자. changeText의 두꺼운 화살표 함수로 state변수의 값을 변경하자. setState()메소드 이용. 위 실행 화면은 .. 2020. 1. 20.

티스토리툴바