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 Android 섹션을 보면 또 추가로 QuickStart를 따라하라고 되어 있다.
- 빠른시작: Link 이곳에서 앱을 하나 만들고, 만든 앱을 클릭하면 이렇게 가이드가 나온다. 그대로 하자!
- 주의할 점: build.gradle을 수정하는 부분은 생략. 왜냐하면 link 과정에서 완료되었기 때문! 나같은 경우는 rn 버전이 0.61.5라 auto link로 이미 설정되어 있을 것이기 때문에 역시 생략한다.
- 빠른시작: Link 이곳에서 앱을 하나 만들고, 만든 앱을 클릭하면 이렇게 가이드가 나온다. 그대로 하자!
- 그리고 실행해서 에러가 안나면 성공!
2-2) iOS
* 접은글은 할 필요 없는 것
-
역시 QuickStart를 진행한다. Link
-
첫 단계인 "iOS용 Facebook SDK 다운로드 및 설치"에서 다음 4개의 framework를 xcode에 옮길 때 나는 copy if needed 를 선택해서 ~/Documents 경로를 써주는 작업을 하지 않았다. 이렇게 하면 에러가 났었음.
-
ios는 auto link를 해제한다.
module.exports = { assets: ['./src/assets/fonts'], dependencies: { 'react-native-fbsdk': { platforms: { ios: null, }, }, }, }; -
그리고 실행시키면 성공!
** 에러: 테스트플라이트에 업로드되지 않음**
App Store Connect Dear Developer, We identified one or more issues with a recent delivery for your app, "루빗" 2.5.15 (1). Please correct the following issues, then upload again. ITMS-90809: Deprecated API Usage - New apps that use UIWebView are no longer accepted. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview). Best regards, The App Store Team
facebook sdk가 4.44.0 (19년 4월)인데, 20년 10월 1일 기준 8.0.0까지 나왔다.
5 버전 이상에서 WebView 문제가 해결된 듯 하다. => ios sdk 설치 필요
- [Link]https://developers.facebook.com/docs/app-events/upgrade-guide/ 이 링크를 따라 한다.
이 접은글은 따라할 필요 없고, 2-2-1로 할 필요가 있다
2-2-1) Contifure projects
github.com/facebook/react-native-fbsdk#32-ios
facebook/react-native-fbsdk
A React Native wrapper around the Facebook SDKs for Android and iOS. Provides access to Facebook login, sharing, graph requests, app events etc. - facebook/react-native-fbsdk
github.com
나 같은 경우는 오토링크이므로 아래 링크에서 Step3, 4 를 따라한다.
https://developers.facebook.com/docs/ios/getting-started/?sdk=cocoapods
시작하기 - iOS SDK - 문서 - Facebook for Developers
iOS용 Facebook SDK에서는 Swift 패키지 관리자를 사용하여 프레임워크를 구현할 수 있습니다.
developers.facebook.com
2. 주의
- 디버그, 릴리즈의 로그를 따로 보고싶다면 페이스북에서 앱을 하나 더 만들어야 한다는 점!
- app_id를 디버그, 릴리즈 관리 브랜치(깃헙)에 각각 다르게 적용시키면 된다.
'Solve Problem > React Native' 카테고리의 다른 글
[React] 다양한 개념 정리 (0) | 2020.11.02 |
---|---|
[React Native] naver login / 네이버 로그인 (0) | 2020.10.06 |
[React Native] push notification custom sound 설정하기 / 커스텀 사운드 / 푸시알람 (2) | 2020.09.28 |
[React Native] Custom Font 적용 (Google Fonts) (0) | 2020.09.12 |
[React Native] Sentry로 로그 이벤트 확인하기 (1) | 2020.09.01 |