차근차근 생활 & 코딩

이번 시간에는 간단한 특정 버전으로 설치하는 방법에 대해 알려드리도록 하겠습니다. 아래 코드를 활용하여 실행해 주시면 설치 됩니다. $ react-native init mysite --version=0.65.1 수고하셨습니다.

이번 시간에는 리액트 네이티브 회원가입 하는 방법에 대해 알려드리도록 하겠습니다. 아래 작업이 귀찬으신 분들께서는 맨 아래 전체코드를 작성해 놓았습니다. Install(설치하기) 아래 코드를 이용하여 라이브러리를 설치하도록 합니다. yarn add @react-native-firebase/auth 상태 변수 만들기 state 상태 변수 코드를 작성해 줍니다. const [initializing, setInitializing] = useState(true); const [user, setUser] = useState(); const [ registerEmail, setRegisterEmail ] = useState(""); const [ registerPassword, setRegisterPassword ..

안녕하세요. 이번 시간에는 스크롤을 위 아래로 움질일 때 스크롤 숨기는 방법에 대해서 알려드리도록 하겠습니다. 예제 코드 요약 #스크롤 숨기기 showsVerticalScrollIndicator={false} 또는 #iOS에서 작동하지만 Android에서는 작동하지 않을 수 있습니다. showsHorizontalScrollIndicator={false} 수고하셨습니다.

안녕하세요. 이번시간에는 현재 위치에서 좌표를 불러오는 방법에 대해서 알려드리도록 하겠습니다. Installing npm install @react-native-community/geolocation --save 안드로이드 권한설정 위치정보 권한 설정을 위해 아래 절차에 따라 진행해 주시면 됩니다. ① android > app > main > AndroidManifest.xml 파일을 선택합니다. ② 아래 코드를 복사하여 선택한 파일 안에 코드를 삽입하여 줍니다. 정확한 위치: ACCESS_FINE_LOCATION 권한이 제공하는 위치 정확도를 제공합니다. 대략적인 위치: ACCESS_COARSE_LOCATION 권한이 제공하는 위치 정확도를 제공합니다. 전체 코드 import React, {useSta..

안녕하세요. 이번 시간에는 카카오 로컬 API를 활용하여 좌표를 주소로 변경하는 작업을 해보도록 하겠습니다. Installing npm 또는 yarn을 통하여 axios를 설치하여 줍니다. npm install axios --save 또는 yarn add axios axios 데이터 불러오기 카카오 개발자 사이트에 접속 ① 내 어플리케이션 > 앱 설정 > 앱키로 접속해 줍니다. ② REST API 키를 복사합니다. ③ 복사한 REST API 키를 React Native 코드에 넣어 줍니다. 결과 확인하기 전체 코드 import React, {useState} from 'react'; import {Text, View, Button} from 'react-native'; import axios from '..

안녕하세요. 이번 시간에는 파이어베이스에서 스토리지로 저장되어 있는 이미지를 가져오는 방법에 대해서 알아보도록 하겠습니다. 방법은 간단합니다. 아래 코드를 활용하여 사용하시면 이미지를 불러올 수 있습니다. import storage from '@react-native-firebase/storage'; //파이어베이스 스토리지 이미지 가져오기 const getImage = async key => { let url = ''; try { const imageRef = await storage().ref('photoName.jpg'); url = await imageRef.getDownloadURL(); setUrl(url); console.log('imageUrl:', url); return url; } ca..

안녕하세요. 이번 시간에는 안드로이드 스플래시 이미지 적용하는 방법에 대해 알려드리도록 하겠습니다. 처음 접해보시는 분들에게는 조금 난이도가 있으니 천천히 따라해 보시면 금방 성공 하실 수 있습니다. Installation(설치하기) 스플래시 이미지를 적용하기 위한 라이브러리를 설치합니다. npm i react-native-splash-screen --save Step 1. 환경 셋업하기 ① android/app/src/main/ 경로로 이동 합니다. ② 이동한 경로에서 MainActivity.java 파일을 아래와 같이 수정 합니다. package com.test2; import android.os.Bundle; // add import com.facebook.react.ReactActivity; //..

안녕하세요. 이번 시간에는 안드로이드 스튜디오(Android Studio)를 활용하여 apk 파일을 만들어 보도록 하겠습니다. 폴더 추가 assets 폴더를 추가해 줍니다. android/app/src/main/assets Bundle 파일 생성 CMD 창에 명령어를 입력해 줍니다. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ Android Studio 프로젝트 빌드 ① Android Studio를 실행합니다. ② Android Stu..