【React Native】react-native-fbsdk 도입(ios)

하고 싶은 일



react native로 facebook 로그인을 실시한다.
하기를 이용.
htps : // 기주 b. 코 m / 후세 보오 k / 레아 ct-nachi ゔ fbsdk

절차



1.react-native-fbsdk 설치 및 링크


react-native install react-native-fbsdk

2.iOS용 Facebook SDK 시작 가이드



아래의 "iOS용 빠른 시작"에 따라 설정 파일 편집
htps : //에서 ゔぇぺぺrs. 후세보오 k. 코 m / 드 cs / 이오 s / 갓찐 g-s r d /
 -

! ! 절차 이외의 수정 ①! !



*어디에 두는가 최적인지 불명
sdk의 저장 위치를 ​​프로젝트의 ios 아래에 frameworks 디렉토리 작성하고 그 안에 framework를 배치
애플리케이션의 Xcode 프로젝트를 엽니다.
프로젝트에 Frameworks 그룹이 없는 경우 생성합니다.
Finder에서 ~/Documents/FacebookSDK를 엽니다.
Bolts.framework, FBSDKCoreKit.framework, FBSDKLoginKit.framework, FBSDKShareKit.framework 파일을 끌어 Xcode Project Navigator의 Frameworks 그룹에 놓습니다. 메시지가 표시되면 Copy Items if needed를 선택하여 계속합니다.

! ! 순서 이외의 수정②! !



앱 설치 및 앱 열기 추적



절차에 따라 다음 소스를 AppDelegate.m에 추가합니다.
그러나 다음 오류가 표시됩니다.
분명히 "UIApplication"을 중복 정의하는 것이 나쁜 것 같습니다.
그 때문에, 「순서대로의 추가 소스」를 추가하지 않고 하기의 「순서 이외의 추가 소스」를 추가했다.

>오류
Duplicate declaration of method 'application:didFinishLaunchingWithOptions:'

>순서대로의 추가 소스
- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];
  return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                         openURL:url
                                               sourceApplication:sourceApplication
                                                      annotation:annotation];
}

> 절차 이외의 추가 소스
- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                        openURL:url
                                              sourceApplication:sourceApplication
                                                     annotation:annotation];
}

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

! ! 순서 이외의 수정③! !



통합을 시도합시다.



이 단계에서는 "앱의 ViewController.m 파일 중 하나에 다음을 추가합니다."
ViewController.m 파일이 없습니다.
따라서 ViewController.m을 xcode에서 만들었습니다.
생성한 ViewController.m에 절차에 따라 필요한 소스를 추가합니다.



사용방법



js측에서 임포트 방법을 아래에서 실시한다.
* 취향이므로, 순서대로 가서 문제 없다.
import React, { Component } from 'react';
import Modal from 'react-native-modalbox';
import { View } from 'react-native';
import FBSDK, { LoginButton, AccessToken } from 'react-native-fbsdk';

export default class Login extends Component {
  render() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("login has error: " + result.error);
              } else if (result.isCancelled) {
                alert("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    alert(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>
      </View>
    );
  }
}

좋은 웹페이지 즐겨찾기