320x100 front-end/React Native13 [RN]메일보내기 라이브러리 (react-native-mail) 리액트 네이티브에서 메일을 편리하게 보낼 수 있는 라이브러리가 있다. 이 라이브러리를 사용하면 사용자의 메일어플(예: 지메일)을 통해 바로 메일을 보낼 수 있다. 설치방법 npm i --save react-native-mail 사용방법 import React from 'react'; import { Button } from 'react-native'; import Mailer from 'react-native-mail'; const SendMail = () => { const handleSendMail = () => { Mailer.mail({ subject: 'Test Email', recipients: ['recipient1@example.com', 'recipient2@example.com'], c.. 2023. 3. 28. [RN]react-native-push-notification 커스텀사운드 적용하기(안드로이드) [문제상황] react-native-push-notification라이브러리를 사용하면서 push알림의 커스텀사운드가 적용이 잘 안되어 애를 먹고 있었다. 분명 경로 설정도 잘 되었고 soundName에도 맞게 잘 설정을 했는데 안되는 이유가 답답했다. 이슈를 탐색하던중 위와 같은 답변을 보았고 드디어 궁금증이 해결되었다. 즉 채널을 한번 생성하게 되면 지정된 사운드는 수정이 불가능하다는 소리다. 나는 이제껏 PushNotification.localNotificationSchedule()안에서만 soundName을 설정하고 있었고 이미 채널을 생성할때는 default사운드가 설정되어있기 때문에 수정이 안되었던 것이다.. [해결방법] PushNotification.createChannel()에서 sound.. 2023. 3. 15. [RN]push알림 구현하기(react-native-push-notification) feat. Chat GPT 사이드프로젝트의 알람앱을 만들던중 이제는 가장 중요하고 핵심적인 기능인 알림기능을 구현해야할 때가 왔다. 알람이 울릴때 push 알림이 필요한데 이 push notification기능에는 크게 두가지 방식이 있다. 원격알림과 로컬알림. 원격알림은 서버에서 알림을 관리하지만 로컬알림은 서버가 필요하지 않다. 알람기능에 서버의 사용이 굳이 필요할까 싶어 로컬push 방법을 사용하기로 했다. 여러 라이브러리를 찾던 중 요즘 핫한 chat GPT를 이용해보았다. 역시 똑똑한 해결사.. 코드예시까지 알려주고, 마지막엔 주의사항도 잊지않고 알려준다. 어쨌든 가장 대중적으로 사용하는 라이브러리이기에 react-native-push-notification을 사용해보기로 했다. https://github.com/zo0r.. 2023. 3. 2. [RN] react-native에서 Refresh 하고 싶을때 (useIsFocused 사용하기) 작업을 하다보면 naviagation.goBack() 을 했을 때 리랜더링을 해줘야 할 때가 있다. 그럴 때 유용하게 사용할 수 있는 hook이 있는데 바로 useIsFocused이다. useEffect의 두번째 인자에 넣어주면 뒤로가기를 할 때 refresh를 할 수 있다. import { useIsFocused } from '@react-navigation/native'; const isFocused = useIsFocused(); useEffect(() => { if (isFocused) console.log('Focused!!'); }, [isFocused]); 공식문서 참고 https://reactnavigation.org/docs/use-is-focused/ 2023. 2. 21. [RN] react-native-sound 사용하기 현재 진행하고 있는 프로젝트에서 사운드를 재생해야하는 작업이 있는데 처음 시도해보는거라 이것저것 찾아보다 react-native-sound 라이브러리를 알게 되었다. 다른 사운드플레이어 라이브러리가 있었지만 react-native-sound 라이브러리가 제일 대중적으로 쓰이는것 같아 선택하게 되었다. https://www.npmjs.com/package/react-native-sound react-native-sound React Native module for playing sound clips on iOS, Android, and Windows. Latest version: 0.11.2, last published: a year ago. Start using react-native-sound in y.. 2023. 2. 21. [RN] Realm Studio로 realm file 열기 https://www.mongodb.com/docs/realm/studio/install/ Install Realm Studio — Realm If you want a file type that isn't listed here, such as a .zip file, view the release page for the version you want. You'll find a complete list of installers for each version. www.mongodb.com 위 사이트로 들어가 Realm Studio를 설치한다. 아래처럼 코드를 작성하면 (참고 https://www.mongodb.com/docs/realm/studio/open-realm-file/) // Get on-disk l.. 2023. 1. 18. [RN]휠 픽커 'react-native-wheel-pick' https://github.com/TronNatthakorn/react-native-wheel-pick GitHub - TronNatthakorn/react-native-wheel-pick Contribute to TronNatthakorn/react-native-wheel-pick development by creating an account on GitHub. github.com 아이템 및 날짜를 선택할때 유용한 라이브러리 설치 npm install react-native-wheel-pick --save --legacy-peer-deps npm install @react-native-picker/picker --save --legacy-peer-deps npm install @react-native-.. 2023. 1. 10. [RN]날짜, 시간 선택 라이브러리<react-native-date-picker> https://github.com/henninghall/react-native-date-picker GitHub - henninghall/react-native-date-picker: React Native Date Picker is datetime picker for Android and iOS. It includes date React Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's wri... github.com 날짜&시간.. 2023. 1. 8. react-native-vector-icons 사용법 / 엑박문제 해결 react-native-vector-icons 은 리엑트네이티브에서 벡터아이콘을 사용할수 있도록 해주는 라이브러리이다. 설치 npm install --save react-native-vector-icons npm install --save @types/react-native-vector-icons 사용방법 (1) 파일 상단에 import 한다. (2) 아래 주소로 들어가 원하는 아이콘이름을 복사한다. react-native-vector-icons directory oblador.github.io import끝엔 빨간박스에 있는 이름 적기 name엔 아이콘 이름 적기 (3) name, size, color값을 입력한다. import Icon from 'react-native-vector-icons/AntD.. 2022. 12. 13. [react-native]리액트JS와의 차이점 (코어컴포넌트와 style) 리액트JS와의 차이점 컴포넌트 reactJs처럼 html 문법을 사용하지 못한다. 왜냐하면 브라우저가 아닌 네이티브기기를 사용하기 때문이다. 네이티브 기기는 DOM을 가지고 있지 않고 Html요소를 지원하지 않는다. 또한 컴포넌트를 쓸때마다 import를 해주어야 한다. import {Text, View, Button} from 'react-native' 코어 컴포넌트 Text 텍스트는 무조건 사이에 들어가야 된다. hello View div와 비슷한 용도로 쓰인다. 하지만 네이티브에선 유일한 컴포넌트를 담는 컨테이너 컴포넌트이다. hello Button 기존에는 요소 사이에 텍스트를 배치했지만 (BUTTON!) 네이티브에서는 하나의 닫힌 컴포넌트 안에서 타이틀 프로퍼티를 사용해 텍스트를 입력한다 () .. 2022. 12. 5. [android studio]애뮬레이터 분리하기 최근 업데이트 된 안드로이드 스튜디오에선 애뮬레이터가 고정되어 있다. 다른 IDE로 작업하려면 분리가 필수이다. 분리하는 방법은 어렵지 않다. 1. command + , 를 눌러 환경설정 창을 띄운다. 2. 왼쪽 상단 검색창에 emu(까지만 적어도 검색가능..ㅎㅎ) 적고 Tools - Emulator로 들어간다. 3. Launch in a tool window의 체크박스를 해제한다. 4. 안드로이드 스튜디오를 종료 후 다시 킨다. 5. 오른쪽에 점세개 아이콘을 눌러 Virtual Device Manager에 들어간다. 6. Device를 실행한다. 분리하기 성공🌝 2022. 12. 2. [react-native] 개발환경설정중 발생한 에러 모음 cocoapods 설치 에러 해결하기 [react-native]ERROR: Error installing cocoapods: 발생상황: react native 개발환경 셋업중, cocoapods설치 중.. sudo gem install cocoapods Ignoring ffi-1.15.5 because its extensions are not built. Try: gem pristine ffi --version 1.15.5 ERROR: Error installing cocoapods: ERROR: Failed to build g jaylee-log.tistory.com ruby 버전 에러 해결하기 (mac) ruby 버전 업데이트 하기 문제상황 react-native init을 했는데 error Your.. 2022. 12. 2. React Native CLI 설치하기(mac) React Native란? 자바스크립트 언어로 React의 방식을 이용하여 모바일 안드로이드와 iOS를 만들 수 있는 프레임워크이다. 리액트 네이티브를 개발할 수 있는 방법엔 두가지가 있다. React Native CLI와 Expo CLI. 이 둘을 간단하게 비교하자면 1. Expo CLI - 초기설정 간단 - 손쉬운 사용 - 네이티브파일과 라이브러리사용에 제한이 있다. - 용량이 크다. 2. React Native CLI - 초기설정 까다로움 - 원하는 기능이나 라이브러리 자유롭게 사용 가능 - Android Studio(Android용) 및 XCode(iOS용)를 설치해야 한다. 이런 특징들을 가지고 있다. 목적에 따라 설치를 선택하면 될것같다. React Native CLI를 사용할것이기 때문에 설.. 2022. 12. 1. 이전 1 다음 320x100
