Solve Problem/React Native 65

[React Native] 인앱리뷰 기능 In-App Review

라이브러리 https://github.com/MinaSamir11/react-native-in-app-review 설치 $ npm install react-native-in-app-review or $ yarn add react-native-in-app-review 사용법 라이브러리에서 제공하는 예제입니다. import InAppReview from 'react-native-in-app-review'; // This package is only available on android version >= 21 and iOS >= 10.3 // Give you result if version of device supported to rate app or not! // trigger UI InAppreview ..

[React Native] TextInput 부분 스타일 적용하는 방법

[따라해볼 예제] - Tick Tick 이라는 어플에서 TextInput에 해시태그와 제목의 스타일이 달라서 어떻게 구현하는지 궁금했다. - 그래서 따라해보기로 했다! [소스코드] ... import React, { useState } from 'react'; ... interface ValueInfo { str: string; isHT: boolean; idxArr: number[]; } const getValueInfos = (value: string): ValueInfo[] => { if (value.length === 0) { return []; } const splitedArr = value.split(" "); let idx = 0; const valueInfos: ValueInfo[] = s..

[React Native] v9 Facebook SDK 적용하기

최근 Facebook SDK를 9로 업데이트하라는 메일이 날라와서 업데이트를 해보려 한다! 환경 react-native: 0.63.4 react-native-fbsdk-next: 4.0.0 FB SDK 9 이상을 사용하려면 위 라이브러리를 사용해야 한다. 9 미만 버전을 사용하려면 react-native-fbsdk를 이용하면 된다. https://www.npmjs.com/package/react-native-fbsdk-next 설치 yarn add react-native-fbsdk-next yarn remove react-native-fbsdk // 이 라이브러리가 설치되어있다면. cd ios && pod install Configure projects 추가설명 참고 링크: https://github.c..

[React Native] Upgrade 0.61.5 to 0.63.4

업데이트를 하자! 제가 운영중인 루빗이라는 어플을 처음 init한지 벌써 1년이 되었어요! react-native 버전이 그새 많이 올라서 업그레이드를 해보려고 합니다. Upgrade Helper Step 1 - Edit Code https://react-native-community.github.io/upgrade-helper 이 사이트를 이용하면 원하는 버전으로의 업데이트를 위해 무엇을 해야하는지 알 수 있어요. 저는 0.61.5에서 0.63.4로 업그레이드를 할겁니다! https://react-native-community.github.io/upgrade-helper/?from=0.61.5&to=0.63.4 여기에 나와있는대로 코드를 수정해주세요. 참고) storyboard 추가하기 기존 ios/R..

react-native-iap 인앱결제 적용하기

라이브러리react-native-iap: 5.1.3https://github.com/dooboolab/react-native-iap1. 라이브러리 설치$ npm install --save react-native-iap$ cd ios && pod install && cd ..# 그 외 -> https://github.com/dooboolab/react-native-iap#getting-started 참고2. AndroidAPK 등록github.com/dooboolab/react-native-iap/issues/618#issuecomment-523384825상품 등록requestPurchase오류!? 뭘했길래이걸로 바뀌었지?시간이 바뀌어서. - https://www.androidhub4you.com/20..

[React] 다양한 개념 정리

1. Babel이란? - 자바스크립트의 문법을 확장해주는 도구 - 자바스크립트 컴파일러 - 코드 변환기 - 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 합니다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드입니다만, 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다고 생각 하면 될 것 같습니다. 바벨은 왼쪽 코드를 오른쪽처럼 자바스크립트 문법으로 변경시켜준다. 2. Webpack이란? - 여러개 파..

[React Native] naver login / 네이버 로그인

0. 환경react-native: 0.62.0@react-native-seoul/naver-login: 2.1.0github.com/react-native-seoul/react-native-naver-login react-native-seoul/react-native-naver-login리엑트 네이티브 네이버 로그인 라이브러리. Contribute to react-native-seoul/react-native-naver-login development by creating an account on GitHub.github.com1. 설치$ npm install @react-native-seoul/naver-login --save또는$ yarn add @react-native-seoul/naver-logi..

[React Native] Facebook SDK 적용하기

0. 목적 / 환경 - 앱 설치 이벤트를 위해 Facebook SDK를 적용해야 했다. - react-native: 0.61.5 - react-native-fbsdk: 3.0.0 1. 설치 1) 라이브러리 설치 yarn add react-native-fbsdk cd ios && pod install && cd .. 2) Configuring Your Project 섹션을 보면 더 자세한 설정이 필요하다고 되어 있다. 2-1) Android Link 만약 rn 버전이 0.60 이상이라면, Configure Native Android Project Activity 섹션은 따라하지 않는다. 이미 auto link가 되어 있기 때문. 이하라면 따라한다. Configure the Facebook SDK for A..

[React Native] push notification custom sound 설정하기 / 커스텀 사운드 / 푸시알람

[React Native] push notification custom sound 설정하기 / 커스텀 사운드 / 푸시알람 라이브러리: github.com/zo0r/react-native-push-notification버전: 5.1.01. iOS1) project/ios 폴더에 .caf 파일을 추가한다. (xcode에서 말고 finder에서!)2) xcode에서 다음과 같이 프로젝트 이름에서 우클릭 - Add Files to "project" 클릭 후 ios 폴더에 추가해놓은 파일을 선택한다.3) 코드 작성 import PushNotification, { PushNotificationScheduleObject } from 'react-native-push-notification'; ..

[React Native] Custom Font 적용 (Google Fonts)

1. 폰트 다운로드fonts.google.com/?preview.text=2020.09.11+%EA%B8%88&preview.text_type=custom Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com무료라서 좋음! 나는 fonts.google.com/specimen/Noto+Sans+KR?preview.text=2020.09.11%20%EA%B8%88&preview.text_type=custom 이 폰트를 사용함  2. 적용dev-yakuza.github.io/ko/react-native/react-native-custom-font/ RN(Reacct Native)에서 커스..

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