react-native-fbsdk를 사용하려고하면 "RCTFBLikeView"does not exist 오류

react-native-fbsdk를 설치 & 링크하여 Facebook 로그인 버튼을 설치해 보았습니다만, 클릭해도 아무 일도 일어나지 않는다.

크롬 디버그 콘솔에는 빨간색 문자로 다음 경고가 출력되었습니다.

Warning: Native component for "RCTFBLikeView" does not exist
Warning: Native component for "RCTFBLoginButton" does not exist
Warning: Native component for "RCTFBSendButton" does not exist
Warning: Native component for "RCTFBShareButton" does not exist

다시 공식 페이지을 보면 다음 설명을 찾을 수 있습니다.

The react-native-fbsdk has been linked by rnpm, the next step will be downloading and linking the native Facebook SDK for iOS. Make sure you have the latest Xcode installed. Open the .xcodeproj in Xcode found in the ios subfolder from your project's root directory. Now, follow all the steps in the Getting Started Guide for Facebook SDK for iOS. Along with FBSDKCoreKit.framework, don't forget to import FBSDKShareKit.framework and FBSDKLoginKit.framework into your Xcode project.

과연 설치&링크만으로는 불충분하고, 원래 ios의 네이티브 framework를 xcode 프로젝트에 추가해 둘 필요가 있는가.

작성된대로 다음 세 가지 프레임 워크를 추가하여 다시 시도하십시오.

FBSDKCoreKit.framework

FBSDKShareKit.framework

FBSDKLoginKit.framework

react-native run-ios 에서 이끼.

framework not found Bolts for architecture x86_64

stackoverflow 에 해결 방법이 있습니다.

다운로드한 FacebookSDK의 폴더에 포함된다 Bolts.framework 도 추가할 필요가 있다.

다시 react-native run-ios 하지만 이번에는 기동시 충돌하는 상황.
결국 네이티브의 지식은 필요한 거라든지 생각하면서 xcode로부터 직접 디버그 실행해 로그를 확인한다.

*** Terminating app due to uncaught exception 'InvalidOperationException', reason: 'fbauth2 is missing from your Info.plist under LSApplicationQueriesSchemes and is required for iOS 9.0'

여기을 참고로 Info.plist를 수정한다.LSApplicationQueriesSchemes 에 fbauth2 를 지정해 보았습니다.
덧붙여서 LSApplicationQueriesSchemes 는 canOpenURL 로 URL 스키마가 열리는지 테스트해 좋은 URL 스키마를 지정하는 것 같습니다. (설명은 여기)

그러나 기동시 충돌은 낫지 않다.
이번에는 다음과 같은 오류

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSTaggedPointerString containsObject:]: unrecognized selector sent to instance 0xa326874756162667'

빙글빙글 이 페이지 에 도착한다.

과연 아까 했던 Info.plist에의 수정이 조금 달라진 것 같다.
다만 LSApplicationQueriesSchemes 는 array 로 지정해, 그 요소에 fbauth2 를 포함한다고 하는 수정이 좋을 것 같다.
그래서 다음과 같은 설정으로 Info.plist를 다시 작성했습니다.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

마음을 다시 돌려 react-native run-ios그러면 어떨까요, 지금까지 빨간 테두리로 밖에 없었던 LoginButton 가 Facebook의 로그인 버튼이 되어 표시되었습니다. 했어!



조속히 탭해 본다.
그래, 어쩐지 예상했지만 충돌했습니다.

그러나 점점 익숙해져 온 Native로부터는 도망칠 수 없으면 배고프고, xcode로 로그를 볼거야.

*** Terminating app due to uncaught exception 'InvalidOperationException', reason: 'App ID not found. Add a string value with your app ID for the key FacebookAppID to the Info.plist or call [FBSDKSettings setAppID:].'

아, Facebook의 appId를 지정하라고 한다. 가능한 한 네이티브 코드를 괴롭히지 않도록 Info.plist에 추가했습니다.

다시 시도, 또한 충돌. 점점.

*** Terminating app due to uncaught exception 'InvalidOperationException', reason: 'fbアプリID is not registered as a URL scheme. Please add it in your Info.plist'

아, 로그인 후 앱으로 돌아가기 위한 URL 스키마를 설정하라고 한다.
xcode에서 URL 스키마를 추가합니다.

여기까지 해 어쩐지 알았지만, react-native install라든지 react-native-fbsdk 인스톨해도, 네이티브들에게의 작업은 별도 할 필요가 있다.
그래서 기본으로 돌아와 네이티브 FacebookSDK의 초기 설정 등 여러가지 했다.

그 결과 마침내 ReactNative에서 Facebook 로그인 할 수 있었다고!

여러가지 공부가 되었다.