안드로이드 웹앱 콘테츠 개발자 양성(국비지원)226 HybridApp-React Native 2세대 (기능 - ImagePicker / 카메라,갤러리앱) 작업하기 전에 AVD를 실행해 놓자. 작업할 경로까지 접근하여 RN15ImagePicker를 init하자. Image picker에 대해 해당 사이트를 들어가보자. https://github.com/react-native-community/react-native-image-picker react-native-community/react-native-image-picker :sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera. - react-native-community/react-native-im.. 2020. 1. 28. HybridApp-React Native 2세대 ( 기능 -Network, GET, POST ) Android에서 Network 통신을 할경우 URL을 사용하면 데이터를 받기만 가능하다. 그래서 추가로 HttpURLConnection 데이터를 보낼때 사용 inputStream, outputStream을 만들어야 한다. 그러나 Volley, Retrofit을 사용해서 쉽게 Network 작업을 했었다. HybridApp에서도 마찬가지로 HttpURLConnection 과 같은 역할이 있다. 바로 XMLHttpRequest 이다. 또한 Network를 쉽게 사용할 수 있도록하는 별도의 라이브러리가 있다. Fetch 라이브러리다. XMLHttpRequest 와 Fetch 를 알아보자. 1. XMLHttpRequest 이용하여 서버(닷홈 도메인)에 있는 js 파일 내용을 읽어온다. 2. Fetch 라이브러.. 2020. 1. 28. HybridApp-React Native 2세대 (Todo List앱) 할일 목록을 누르면 해당 항목은 지워지고, Done화면에 생긴다. 라이브러리는 stackNavigator를 사용하였다. 작업하기 전에 AVD를 실행시켜 놓자. cmd창에서 작업할 경로까지 접근하여 init하자. React Navigation을 사용하기 위해 5가지를 추가하자. 명령어:npm install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context 추가로 StackNavigator를 사용하기 위해 아래 사진과 같이 설치하자. 명령어:npm install react-navigation-stack @react-native-communit.. 2020. 1. 23. HybridApp-React Native 2세대 (1-1 BottomTabNavigator) BottomTabNavigator 이용해서 쉽게 화면 전환을 한다. 해당 탭에 icon을 넣고 색상 변경도 해본다. AVD를 실행시키고 작업을 하자. react-navigation 라이브러리 이용해보자. 명령어:npm install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context BottomTabNavigator를 이용하기 위해 설치하자. 명령어 :npm install react-navigation-tabs 아래 사진을 보면 추가된 것을 알 수 있다. 설치하고 코드 작성 전에 run을 하자. Main.js를 만들자. RN12Navigat.. 2020. 1. 23. 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. 이전 1 2 3 4 5 ··· 26 다음
