Solve Problem/React Native

[React Native] Facebook SDK 적용하기

안다희 2020. 9. 30. 18:28
728x90

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로 이미 설정되어 있을 것이기 때문에 역시 생략한다.

이 부분은 생략.

  • 그리고 실행해서 에러가 안나면 성공!

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 설치 필요

이 접은글은 따라할 필요 없고, 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를 디버그, 릴리즈 관리 브랜치(깃헙)에 각각 다르게 적용시키면 된다.
출처: https://mingos-habitat.tistory.com/34 [밍고의서식지:티스토리]