在React Native中登录Facebook

npm install react-native-fbsdk --save

yarn add react-native-fbsdk

react-native link react-native-fbsdk

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fbYOUR_APP_ID</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')

implementation project(':react-native-fbsdk')

import com.facebook.react.devsupport.FacebookSdkPackage;

public class MainActivity extends ReactActivity {
    // ...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new FacebookSdkPackage()
      );
    }
}

<string name="facebook_app_id">YOUR_APP_ID</string>
<string name="fb_login_protocol_scheme">fbYOUR_APP_ID</string>

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { LoginManager, AccessToken } from 'react-native-fbsdk';

const FacebookLogin = () => {
  const [userInfo, setUserInfo] = useState(null);

  const loginWithFacebook = async () => {
    try {
      const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
      if (result.isCancelled) {
        console.log('Login cancelled');
      } else {
        const tokenData = await AccessToken.getCurrentAccessToken();
        if (tokenData) {
          const responseInfoCallback = async (error, result) => {
            if (error) {
              console.log(error);
            } else {
              setUserInfo(result);
            }
          };
          await AccessToken.getCurrentAccessToken().then((token) => {
            fetch(`https://graph.facebook.com/me?access_token=${token.accessToken}&fields=id,name,email,picture.type(large)`, {
              method: 'GET',
            })
              .then((response) => response.json())
              .then((json) => {
                responseInfoCallback(null, json);
              })
              .catch((error) => {
                responseInfoCallback(error, null);
              });
          });
        }
      }
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <View>
      <Button title="Login with Facebook" onPress={loginWithFacebook} />
      {userInfo && (
        <View>
          <Text>ID: {userInfo.id}</Text>
          <Text>Name: {userInfo.name}</Text>
          <Text>Email: {userInfo.email}</Text>
        </View>
      )}
    </View>
  );
};

export default FacebookLogin;

react-native run-ios

react-native run-android