반응형 React Native12 ReactNative Firebase 구글 로그인 카카오 로그인보다 더 말썽일가 싶었는데 구글로그인도 생각보다 말썽이다 1. 기초설정 먼저 하기 링크에서 기초 환경세팅을 설정한다 https://rnfirebase.io React Native Firebase | React Native Firebase Welcome to React Native Firebase! To get started, you must first setup a Firebase project and install the "app" module. React Native Firebase is the officially recommended collection of packages that brings React Native support for all Firebase services on r.. 2023. 7. 13. React Native 카카오 로그인 + Firebase 연동 0. 개요 본 글 내용은 리액트 네이티브에서 카카오 로그인을 구현하고 이를 파이어베이스와 연동하는 작업을 서술하려고함 Flow는 다음과 같음 1. 카카오 디벨로퍼에서 애플리케이션 생성 2. Android, iOS 환경설정 3. 카카오 로그인 구현 4. 파이어베이스와 연동 1. 카카오 디벨로퍼에서 애플리케이션 만들기 먼저 카카오 디벨로퍼 사이트로 들어갑니다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 그리고 아래와 같이 애플리케이션 추가를 눌러 카카오 애플리케이션을 만들어줍니다. 만드셨다면 로그인 항목에서 활성화 설정을 ON으로 바꿔줍니다. .. 2023. 7. 1. [iOS] ReactNative에서 파이어베이스 사용하기 https://rnfirebase.io React Native Firebase | React Native Firebase Welcome to React Native Firebase! To get started, you must first setup a Firebase project and install the "app" module. React Native Firebase is the officially recommended collection of packages that brings React Native support for all Firebase services on rnfirebase.io 안드로이드는 문제없이 잘 되나 ios가 말썽이여서 정리 일단 아래 패키지를 설치 # Using npm np.. 2023. 6. 30. react navigation 배우기 6부 - 네비게이션 라이프 사이클 https://reactnavigation.org/docs/navigation-lifecycle https://reactnavigation.org/docs/navigation-lifecycle/ reactnavigation.org 1. react navigation의 라이프 사이클 한줄 요약하면 리액트의 컴포넌트 라이프사이클 개념을 고대로 가져와서 react navigation에 적용할 수 있습니다. 예를 들어 봅시다. 스택네비게이터 안에 스크린 A와 B가 있습니다. 먼저 스크린 A를 호출하면 componentDidMount가 호출됩니다. 이후 B를 호출하면 역시 componentDidMount가 호출됩니다. 허나 A의 componentWillUnmout는 호출되지 않습니다. 왜냐하면 A는 여전히 스택에.. 2023. 2. 13. react navigation 배우기 5부 - 네스팅 네비게이터 1. 네스팅 네비게이터란 아래와 같이 네비게이터 안에있는 스크린이 네비게이터를 품고 있으면 이를 네스팅 네비게이터라고 합니다. function Home() { return ( ); } function App() { return ( ); } 위 코드의 구조는 아래와 같이 됩니다 Stack.Navigator □ Home (Tab.Navigator) ＊ Feed (Screen) ＊ Messages (Screen) □ Profile (Screen) □ Settings (Screen) 보시는바와 같이 Home 스크린은 스크린이자 네비게이터 역할을 하고 있습니다. 2. 네스팅 네비게이터의 특징 각각의 네비게이터는 독립된 히스토리 스택을 가집니다 각각의 네비게이터는 독립된 option값을 가집니다 네비게이터 안에 있.. 2023. 2. 13. react navigation 배우기 4부 - 헤더 구성하기 https://reactnavigation.org/docs/headers https://reactnavigation.org/docs/headers/ reactnavigation.org 1. 헤더 제목 설정하기 앞서 배운것처럼 option에 title 항목에 값을 주면 된다 function StackScreen() { return ( ); } 2. 파라미터 내용을 헤더제목으로 설정하기 파라미터를 헤더제목으로 설정하려면 아래와 같이 arrow function을 이용한다 function StackScreen() { return ( ({ title: route.params.name })} /> ); } 3. 옵션값을 바꾸고 리렌더링 하기, setOptions 앞서 3부에서 파라미터 값을 바꾸고 rerenderi.. 2023. 2. 13. react navigation 배우기 3부 - 파라미터 넘겨주기 https://reactnavigation.org/docs/params https://reactnavigation.org/docs/params/ reactnavigation.org 1. 파라미터 념겨주는 방법 앞서 2부에서 페이지를 이동할 때 파라미터를 넘겨주는 법에 대해서 배우기로 약속했었다. 페에지를 이동할 때 파라미터를 넘겨주는 방법은 다음과 같다. navigate나 push의 메소드에 두번째 파라미터로 오브젝트 형태로 전달한다 navigation.navigate('Route네임', { /* 파라미터 자리 */ }) 파라미터를 읽는 스크린은 route.params를 통해 접근한다 공식문서는 params들이 JSON-serializable 하는것이 좋다고 한다. 즉, 경로 및 매개 변수에 함수, 클래.. 2023. 2. 12. react navigation 배우기 2부 - 페이지 이동 https://reactnavigation.org/docs/navigating https://reactnavigation.org/docs/navigating/ reactnavigation.org 1. 페이지 이동하는법 StackNavigator안에 있는 모든 스크린 컴포넌트들은 navigation이라는 prop을 받게 된다. 이를 이용하여 페이지를 navigating 할 수 있다. 아래 예제는 1부에서 보았던 예제를 이용하여 home에서 detail 페이지로 넘어가는 예제이다. 테스트하기 import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@r.. 2023. 2. 12. react navigation 배우기 1부 - 기초지식 https://reactnavigation.org/docs/hello-react-navigation https://reactnavigation.org/docs/hello-react-navigation/ reactnavigation.org 1. 개요 웹에서는 태그로 링크를 타고 다른페이지로 넘어가고, 백버튼을 눌러서 페이지 뒤로가기가 가능하다. 그리고 이는 stack 의 형태로 관리된다. 허나 리액트 네이티브에서는 자체적으로 웹처럼 built-in으로 내장된 stack 관리가 없다. 그래서 나온것이 react navigation이다. 이를 이용하면 웹페이지처럼 페이지를 스택으로 관리 가능하다 2. 설치 아래 커맨드로 설치하자 npm install @react-navigation/native-stack 또는.. 2023. 2. 12. StyleSheet.create를 사용하는 이유 리액트 네이티브에서 스타일을 줄 때 StyleSheet.create라는 메소드를 사용한다. 그런데 그냥 오브젝트를 넘겨주는것과 무엇이 다를까? 정답은 자동완성에 있어 차이가 있다 StyleShee.create 메소드를 사용할 경우 style에 관련된 내용을 작성할 것을 아니 에디터에서 자동완성 기능이 훨 씬 더 잘먹힌다고 한다. 반면 그냥 오브젝트를 넘겨줄 경우 그렇지가 않다. 2023. 1. 27. [RN] 리액트 네이티브 웹뷰 스와이프 제스처 enable하기 리액트 네이티브 웹뷰에 safari처럼 swipe를 이용하여 페이지 앞 뒤로 이동하고 싶으면 다음과 같은 항목을 enable하면 된다 그러면 사파리처럼 앞뒤로 스와이프 네비게이션을 사용할 수 있다! 2022. 11. 15. [RN] 리액트 네이티브 카메라, 마이크 권한 얻기 1. 서론 웹뷰로 카메라 쓸 일이 생겼었다. 헌데 아이폰에서 리액트 네이티브 웹뷰를 올리니깐 카메라 권한 물어보는 리퀘스트가 뜨지를 않는다. 찾아보니 리액트네이티브에서는 자체적으로 권한요청을 제공하지 않고 react-native-permission이라는 라이브러리를 사용해야한다. 깃허브 주소는 아래를 참고 https://github.com/zoontek/react-native-permissions GitHub - zoontek/react-native-permissions: An unified permissions API for React Native on iOS and Android An unified permissions API for React Native on iOS and Android - Git.. 2022. 11. 15. 이전 1 다음 반응형
