ReactNative
-
[React Native] 3X3 FlatList 배열 만들기졸업프로젝트 2020. 12. 2. 11:16
메인 화면에서 다운로드한 책을 3x3 열로 보여주기 위해 react-native-grid-layout을 이용하고자 했으나 번들 오류로 인해 react-native에 포함되어 있는 FlatList로 grid layout을 구현하였다. 여기를 참고하여 코드를 작성하였습니다. 1. 배경화면 넣기 ImageBackground를 이용합니다. Image와 다르게 child를 가질 수 있어 child로 다른 components를 포함할 수 있습니다. 1.1 local file 이미지 경로에 추가하기 source={require('local_file_경로')}와 같이 사용합니다. 1.2 이미지 크기 늘리기 배경화면으로 이미지를 사용하기 위해 width와 height의 범위를 100%로 합니다. 1.2.1 이미지 크기에..
-
[React Native] 탭 구현하기졸업프로젝트 2020. 12. 2. 10:47
이 글은 여기를 참고하여 작성되었습니다. 지난번 버튼을 눌러 화면을 이동하는 법에 이어 탭을 구현해 보았습니다. React Native에서 탭 자체는 createBottomTabNavigator를 이용하여 만든 후 createAppContainer에 생성한 TabNavigator를 담아 export 하는 방식으로 만든다 App.js import {createAppContainer} from 'react-navigation'; import React from 'react'; import {createBottomTabNavigator} from 'react-navigation-tabs'; import Ionicons from 'react-native-vector-icons/Ionicons'; import M..
-
[React Native] 협업하기 (git 충돌 해결)졸업프로젝트 2020. 12. 2. 10:36
애플리케이션 프론트 구현을 두 명이서 나누어 진행하기 위해 git과 연동하였다. react native용 git ignore 파일엔 node_module 파일을 업로드하지 않는다고 되어있어 각자 설치한 라이브러리 파일은 올라가지 않게 되어있다. 따라서 처음 코드를 합치는 과정에서 라이브러리 미설치로 인한 오류들이 잔뜩 등장해 있었다. 이 경우, package-lock.json 파일을 삭제한 뒤 npm install을 해주면 프로그램을 돌리는데 필요한 라이브러리를 알아서 설치해준다. 이렇게 해서 첫 코드 합치기에서 발생한 오류를 해결하였다.
-
[React Native] 버튼 눌러 페이지 이동하기졸업프로젝트 2020. 11. 28. 00:41
탭을 구현해야 하는데 버튼을 눌러 페이지 이동하는 것을 구현해버렸다. (아아...) 두 가지 모두 react-navigation 라이브러리를 이용하여 구현할 수 있어서 금방 바꿀 수 있을 것 같다. 일단 구현만 해보는 것을 목표로 했기 때문에 블로그의 코드를 그래도 써보았고 그 과정에서 나온 에러들을 정리하고자 한다. 1. bundle 자체가 진행되지 않는 에러 (time out error) expo를 사용하여 기기에서 코드를 확인하고 싶은 경우 expo를 실행한 노트북과 코드를 확인할 기기가 같은 네트워크에 연결되어있어야 한다. 나는 확인도 안 하고 휴대폰은 데이터를 켜놓고 노트북은 와이파이에 연결되어 있어 계속 time out 에러가 발생했다. 왜 안되지.. 왜 안되지.. 30분을 찾다가 휴대폰이 와..
-
시스템 아키텍쳐 (React-Native를 선택한 이유)졸업프로젝트 2020. 11. 27. 23:38
1. React Native 선택 어플리케이션 개발로 방향을 확정하였을 때 먼저 생각난 것은 안드로이드 스튜디오였다. 개발 환경이 window 기반이고 mac 없이 ios 어플리케이션 개발이 불가능하다고 들었기에 처음에는 안드로이드 스튜디오로 개발을 시작하려 했다. 개발을 시작해볼까..? 하고 안드로이드 스튜디오를 켜고 조금이나마 손을 대는 순간 뭔가 굉장히 하기 싫다는 느낌을 받았다. 안드로이드 스튜디오 자체가 굉장히 무겁기도 하고 조금 old 하다는 느낌을 많이 받았다. 그래서 다른 방법으로 어플리케이션을 개발할 수 없을까 하고 찾아보다 나온 것이 React Native였다. React Native(RN)란? 리액트의 접근방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트이다. javascri..