React Native for iOS 사용 가이드
※ 리액트네이티브 0.61.5 기반
1. 리액트네이티브 프로젝트 생성
– 리액트네이티브 프로젝트를 생성합니다.
2. 리액트네이티브 핑거푸시 네이티브 모듈 및 파일 다운로드
1. 리액트네이티브 핑거푸시 네이티브 모듈 및 파일을 여기 에서 다운로드합니다.
2. 리액트네이티브 핑거푸시 네이티브 모듈 및 파일을 리액트네이티브 프로젝트 폴더에 다음과 같은 위치에 이동시킵니다.
3. 파일을 추가하고 다음의 화면이 나타나면 Create Bridging Header를 선택하여 Bridging Header 파일을 생성한다. (수동으로 Bridging-Header 추가하기 : https://helloworld.fingerpush.com/swift-프로젝트에서-핑거푸시-이용법/)
4. Bridging Header 파일에 다음과 같이 작성합니다.
2. 리액트네이티브 핑거푸시 네이티브 모듈 및 파일을 리액트네이티브 프로젝트 폴더에 다음과 같은 위치에 이동시킵니다.
3. 파일을 추가하고 다음의 화면이 나타나면 Create Bridging Header를 선택하여 Bridging Header 파일을 생성한다. (수동으로 Bridging-Header 추가하기 : https://helloworld.fingerpush.com/swift-프로젝트에서-핑거푸시-이용법/)
4. Bridging Header 파일에 다음과 같이 작성합니다.
3. 핑거푸시 관리자 사이트 APP 생성
1. 핑거푸시 사이트(https:/www.fingerpush.com)에서 앱 추가를 눌러 핑거푸시 앱을 생성합니다.
2. 필수값인 앱 이름, 앱 구분, 앱 카테고릴 입력 또는 선택합니다.
3. 설정을 선택하면 App Key, App Secret 을 확인할 수 있습니다.
4. 핑거푸시의 App Key, Secret Key를 프로젝트의 시작 위치에 아래 사용한 함수와 같이 입력 후 저장합니다.
2. 필수값인 앱 이름, 앱 구분, 앱 카테고릴 입력 또는 선택합니다.
3. 설정을 선택하면 App Key, App Secret 을 확인할 수 있습니다.
4. 핑거푸시의 App Key, Secret Key를 프로젝트의 시작 위치에 아래 사용한 함수와 같이 입력 후 저장합니다.
4. 푸시 기능 추가
1. Signing & Capabilities에서 Bundle Identifier와 Provisioning Profile을 수정합니다.
2. Capability 추가 선택 -> Background Modes의 Remote notifications, Push Notifications 추가합니다.
3. 핑거푸시 프레임워크를 여기에서 다운로드 받은 후 프로젝트의 Frameworks 폴더에 드래그해서 추가합니다.
4. Appdelegate.m 파일의 moduleName을 프로젝트의 이름으로 수정합니다.
5. 터미널에 아래의 명령어를 순서대로 입력하여 푸시를 받기 위한 react-native-push-notification 라이브러리를 설치한다.
1) npm install —save react-native-push-notification
2) npm install —save @react-native-community/push-notification-ios
3) react-native link @react-native-community/push-notification-ios
4) ios 폴더에서 pod install
6. 프로젝트에 react-natvie-community 라이브러리를 import합니다.
2. Capability 추가 선택 -> Background Modes의 Remote notifications, Push Notifications 추가합니다.
3. 핑거푸시 프레임워크를 여기에서 다운로드 받은 후 프로젝트의 Frameworks 폴더에 드래그해서 추가합니다.
4. Appdelegate.m 파일의 moduleName을 프로젝트의 이름으로 수정합니다.
5. 터미널에 아래의 명령어를 순서대로 입력하여 푸시를 받기 위한 react-native-push-notification 라이브러리를 설치한다.
1) npm install —save react-native-push-notification
2) npm install —save @react-native-community/push-notification-ios
3) react-native link @react-native-community/push-notification-ios
4) ios 폴더에서 pod install
6. 프로젝트에 react-natvie-community 라이브러리를 import합니다.
5. 예제 파일 적용 및 푸시메시지 확인
1. 프로젝트 폴더 내의 App.js 파일을 예제 파일로 변경합니다.
2. setDevice 함수를 통해 앱을 핑거푸시 서버에 등록합니다.
3. 디바이스가 정상적으로 등록됐다면 핑거푸시 사이트에서 확인 가능하고, 푸시메시지를 수신할 수 있습니다.
2. setDevice 함수를 통해 앱을 핑거푸시 서버에 등록합니다.
3. 디바이스가 정상적으로 등록됐다면 핑거푸시 사이트에서 확인 가능하고, 푸시메시지를 수신할 수 있습니다.
6. 리액트네이티브 핑거푸시 플러그인 API Reference
핑거푸시 API의 기능과 변수, 결과값에 대한 정보는 ‘Guide’ > ‘API Reference’ > Android API Reference for AAR에서 확인할 수 있습니다.