목록reactnative (30)

차근차근 생활 & 코딩

[ReactNative] RN - firebase storage 이미지 가져오기

안녕하세요. 이번 시간에는 파이어베이스에서 스토리지로 저장되어 있는 이미지를 가져오는 방법에 대해서 알아보도록 하겠습니다. 방법은 간단합니다. 아래 코드를 활용하여 사용하시면 이미지를 불러올 수 있습니다. 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..
IT/REACT NATIVE(리액트 네이티브) 2021. 12. 15. 20:47
[React Native] RN - Android Splash 이미지 적용하기

안녕하세요. 이번 시간에는 안드로이드 스플래시 이미지 적용하는 방법에 대해 알려드리도록 하겠습니다. 처음 접해보시는 분들에게는 조금 난이도가 있으니 천천히 따라해 보시면 금방 성공 하실 수 있습니다. 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; //..
IT/REACT NATIVE(리액트 네이티브) 2021. 12. 6. 16:46
[React Native] RN - 절대경로 설정하기

이번 시간에는 절대 경로 설정 방법에 대해 알려드리도록 하겠습니다. 처음 절대 경로를 설정하지 않으면 상대 경로를 이용하여 개발을 진행합니다. 상대경로로 이용하면 굳이 코드를 건드리지 않고 작업하기 편하니까요. 하지만..../../../ 이런 무한적인 반복으로 인해 먼가 잘못되었다는 것을 깨닫습니다. 처음부터 설정하고 작업을 진행 할 것이라는 슬픈 생각에 빠지게 됩니다. 절대 경로를 무조건 설정해야 하는 것은 아닙니다. 상대 경로든 절대 경로든 여러분들께서 편하신 방법대로 하시면 됩니다. 절대경로에 설정은 너무 너무 쉬우니 걱정하지 않으셔도 됩니다. Install ① 모든 React 플러그인에 대한 Babel 사전 설정 Using npm: npm install --save-dev @babel/preset..
IT/REACT NATIVE(리액트 네이티브) 2021. 12. 2. 15:17
[React Native] RN - 구글 폰트(Custom Font) 사용하기

이번 시간에는 ReactNative 커스텀 폰트를 사용하는 방법에 대해 알려드리도록 하겠습니다. 폰트 다운로드 원하는 폰트를 다운로드 합니다. 프로젝트에 폰트 파일 추가하기 다운 받은 폰트는 assets/fonts를 추가해줍니다. 설정파일 추가하기 ① react-native.config.js 파일을 새로 생성합니다. ② assets 속성을 추가합니다. module.exports = { assets: ['./assets/fonts'], }; 폰트파일 링크하기 명령어를 실행하면 폰트를 링크합니다. > react-native link 폰트 사용하기 테스트 수고하셨습니다.
IT/REACT NATIVE(리액트 네이티브) 2021. 12. 1. 15:32
[ReactNative] Expo 환경설정 - 핸드폰 연결 & 접속하기(Lan 연결하기)

안녕하세요. 이번 시간에는 Expo 핸드폰으로 접속하는 방법에 대해 알아보도록 하겠습니다. Expo 앱 설치 안드로이드는 QR을 바로 촬영하는 기능이 있지만, 아이폰은 기능이 없어 카메라로 그냥 촬영하시면 연결됩니다. 핸드폰과 EXPO 연결하기
IT/REACT NATIVE(리액트 네이티브) 2021. 11. 28. 09:37
[React Native] onChange 이벤트

안녕하세요. 이번 시간에는 onChange에 대해서 알려드리도록 하겠습니다. ReactNative에서는 onChange를 기존 쓰던 방식으로 하면 결과 값이 아무것도 표시되지 않는 것을 확인 할 수있습니다. 그럼 ReactNative 에서는 event.nativeEvent.text 이라는 코드를 사용하셔야 합니다. ReactNative가 아닌 React JS 에서는 onChange 이벤트 발생하려면 event.target.value를 입력하시면 됩니다. 간단한 예를 보여드리도록 하겠습니다. onChange={(event)=> console.log(event.target.value)} 라는 코드를 작성하면 이벤트가 발생됩니다. 하지만 ReactNative에서는 evenvt.target.value라는 코드의..
IT/REACT NATIVE(리액트 네이티브) 2021. 11. 19. 13:57
Prev 1 2 3 4 Next