React-native

Youtube 재생하기

설치 및 준비 1. 확장설치 기본적으로 react-native-webview가 설치되어 있어야 함 expo install react-native-youtube expo-dev-client npm install --save react-native-youtube yarn add react-youtube //유튜브 설치 npm i react-youtube npm i youtube-player //오류 발생 시, 필요에 따라 설치 2. 유튜브API key 만들기 안드로이드에서 react-native-youtube를 사용하기 위해서는 Youtube developer API key가 필요함. 아래에 링크를 통해 Youtube developer API key를 생성해야함. Youtube Developer API Ke..

iframe 적용하기

import {Alert} from 'react-native'; import {getYoutubeMeta} from 'react-native-youtube-iframe'; getYoutubeMeta('sNhhvQGsMEc').then(meta => { Alert.alert('title of the video : ' + meta.title); }); 1. 사전에 설치되어 있어야 하는 패키지 1) iframe은 기본적으로 react의 Hooks 개념을 사용한다. 따라서 webview를 설치해야함. 2) Hooks이란, 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존..

Navigation 적용하기

1. Navigation 1) 설치파일 (터미널에 입력, 이건 기본적으로 설치해야 함, Stack이냐 Botton이냐는 선택) 기본 도구 yarn add @react-navigation/native 네비게이션 추가 설치코드 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view 스테이터스바 설치 expo install expo-status-bar 2) 사용법 // App.js 코드 // 컴포넌트를 import해주고, NavigationContainer를 App이란 함수(Function)으..

초기 세팅

환경 세팅 : 1. VS Code (다운로드 링크) (VS code 이쁘게 : Material Icon Theme) 2. node.js (LTS 16.14.2 로 설치하기 >> 최신버전 미지원 우려) 1) 일반 설치 프로그램처럼 설치 2) Automatically setup 설정 후 설치 (이후 CMD와 Powershell열리고 설치진행됨) 3. Android studio (다운로드 링크) : 앱 개발 및 배포를 위함 1) 설치 후, 실행 2) ‘Do not import ‘ 선택 후 처음부터 실행. 3) Next 후 set up type은 standard 4) 화면 타입 설정 후 Next > Finish 로 설치 끝 4. Xcode (MAC 사용시) (다운로드 링크) : 앱 개발 및 배포를 위함 5. y..