Development/React Native 87

[React Native] react-native-gesture-handler 사용법

- 환경 react-native: 0.61.5 - 라이브러리 https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html Getting Started · React Native Gesture Handler Gesture Handler aims to replace React Native's built in touch system called [Gesture Responder System](http://facebook.github.io/react-native/docs/gesture-responder-system.html). software-mansion.github.io - 목적 어떠한 뷰가 있을 때 그 뷰를..

[React Native] 코드푸시 & 테스트 플라이트

1. react-native-code-push 설치 https://github.com/Microsoft/react-native-code-push microsoft/react-native-code-push React Native module for CodePush. Contribute to microsoft/react-native-code-push development by creating an account on GitHub. github.com - ios, android 따라가기 https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-ios.md https://github.com/microsoft/react-native-co..

[React Native] react-native-svg 사용법 (점과 점 사이를 선으로 긋는 애니메이션 구현하기)

https://github.com/react-native-community/react-native-svg react-native-community/react-native-svg SVG library for React Native, React Native Web, and plain React web projects. - react-native-community/react-native-svg github.com 오늘 사용할 라이브러리! - 내가 원하는 것: 화면 내에서 원하는 점과 점 사이를 선으로 긋고 싶다. import React, {useEffect, useState, useRef} from 'react'; import {Svg, Line} from 'react-native-svg'; const Ani..

[React Native] 휴대폰/시뮬레이터 화면의 총 가로/세로 길이를 알아내는 법! => Dimensions

Dimensions를 이용하면 화면의 총 가로 세로 길이를 알 수 있다. constants.js import {Dimensions} from 'react-native'; const {width, height} = Dimensions.get('screen'); export default {width, height}; 파일을 하나 만들어서 여러 컴포넌트에서 활용하자! 앱의 화면을 만들 때 View 의 세로 길이를 휴대폰 기종마다 같은 비율을 적용하고 싶다면 import React from 'react'; import constants from './constants'; const Container = () => ( ); 이런식으로 활용 가능! 도움이 되셨다면 공감/댓글 부탁드려요~

[React Native] react-native-camera 카메라 띄우기, 사진 찍기, 사진 저장하는 법 (react-native-community)

😉 홍보 하나 하겠습니다! 성공적인 루틴 관리를 원하시나요? 지금 바로 스토어에서 "루빗"을 검색해보세요! [ 제가 직접 운영중인 어플입니다 :) ] 루빗 홈페이지 플레이스토어 앱스토어 ✨ 와디즈 펀딩 오픈예정 구경하기 ✨ 와디즈 오픈예정 | 내 손 안의 매니저 루빗 : 습관, 하루 루틴, 할 일까지 관리해드릴게요 내 손 안의 매니저 루빗 : 습관, 하루 루틴, 할 일까지 관리해드릴게요 www.wadiz.kr 오늘 사용할 라이브러리 [1] react-native-comminity/react-native-camera (for 카메라 띄우기, 사진 촬영) https://github.com/react-native-community/react-native-camera [ react-native-community..

[React Native] 갤러리에서 사진 가져오기 (iOS)

react-native: 0.61.5 갤러리에서 사진을 가져오려면 camera 권한이 필요함. 1) PHOTO_LIBRARY 권한 요청 https://coding-dahee.tistory.com/145 [React Native] react-native-permission 사용법 https://github.com/react-native-community/react-native-permissions react-native-community/react-native-permissions An unified permissions API for React Native on iOS and Android - react-native-commu.. coding-dahee.tistory.com 권한 요청 라이브러리 사용은 ..

[React Native] react-native-permission 사용법

[환경] react-native: 0.61.5 https://github.com/react-native-community/react-native-permissions react-native-community/react-native-permissions An unified permissions API for React Native on iOS and Android - react-native-community/react-native-permissions github.com PHOTO_LIBRARY (갤러리) 접근 권한 허용을 위해 오늘 쓸 라이브러리! 문서가 잘 정리되어 있어서 그대로 따라가겠음! 1) SetUp $ npm install --save react-native-permissions # --- o..

[React Native] NFC 태그 시 앱/어플 실행시키는 방법 (Android 위주)

[Android] 방법1. 실행시키길 원하는 앱의 소스코드 만지기 결과적으로는 https://github.com/observ3r/nfc-ndef-react-native 에 있는 android 코드를 사용했더니 됐다! (라이브러리 설치 없이) 1) android/app/src/main/AndroidManifest.xml 에 다음 권한 추가 2) 같은 파일에 다음 코드 추가 ... activity 태그 안에 기존 intent-filter도 있다. intent-filter를 정확하겐 모르지만 앱을 클릭해서 실행 또는 nfc로 태그해서 실행할 수 있음을 의미하는게 저 2개의 intent-filter 같음! 3) android/app/src/main/res/xml/nfc_tech_filter.xml (xml 폴더..

[React Native] run-android 되지 않을 때 / Could not compile settings file /JDK 문제

- 에러1 react-native run-android 디바이스 연결도 잘 되어있는데 안됐다. (참고로 예전 맥북에서 새 맥북으로 바꿔서 안드로이드 실행 처음 해보는거였음) 에러 뜸 * What went wrong: Could not compile settings file '/Users/daheeahn/Desktop/DaheeSpace/roubit_app/android/settings.gradle'. > startup failed: General error during semantic analysis: Unsupported class file major version 57 jdk 13을 깔아서 생겼던 문제. 이곳에서 jdk 8을 깔자 https://igeniusdo.tistory.com/11 맥(MAC)..

[React/RN] useMutation react-apollo-hooks error

- version "react-apollo-hooks": "^0.5.0", "@apollo/react-hooks": "^3.1.3", - useMutation을 쓰려하니까 에러가 났다. Could not find "client" in the context or passed in as a prop. Wrap the root component in an , or pass an ApolloClient instance in via props. // import {useMutation} from 'react-apollo-hooks'; import {useMutation} from '@apollo/react-hooks'; react-apollo-hooks에서 import 하니까 난 에러였다. 이 버전에 문제가 있나..

출처: https://mingos-habitat.tistory.com/34 [밍고의서식지:티스토리]