在React Native中登录Facebook

在React Native中登录Facebook，您可以使用react-native-fbsdk库。以下是使用该库登录Facebook的步骤：

1. 安装依赖库

首先，您需要安装react-native-fbsdk库以及其依赖项。可以使用npm或yarn来安装：

npm install react-native-fbsdk --save

或者

yarn add react-native-fbsdk

2. 链接原生模块（对于React Native < 0.60）

如果您使用的是React Native 0.60以下的版本，您需要手动链接原生模块：

react-native link react-native-fbsdk

对于React Native 0.60及以上版本，自动链接应该会处理这些依赖项。

3. 配置iOS项目

3.1. 打开Xcode并选择您的项目

在Xcode中打开您的项目，然后选择项目文件（通常在导航面板左侧）。

3.2. 添加Facebook SDK

在Libraries文件夹下，右键点击并选择Add Files to "YourProjectName"...，然后导航到node_modules/react-native-fbsdk/ios目录，选择FBSDKCoreKit.xcodeproj、FBSDKLoginKit.xcodeproj和FBSDKShareKit.xcodeproj，点击Add。

3.3. 链接框架

在Xcode中，选择您的项目文件，然后选择Build Phases标签。
展开Link Binary With Libraries部分，点击+按钮，添加以下框架：
- FBSDKCoreKit.framework
- FBSDKLoginKit.framework
- FBSDKShareKit.framework

3.4. 配置Info.plist

打开Info.plist文件，添加以下内容：

<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>

将YOUR_APP_ID和YOUR_APP_NAME替换为您的Facebook应用ID和应用名称。

4. 配置Android项目

4.1. 修改`android/settings.gradle`

在settings.gradle文件中添加以下内容：

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

4.2. 修改`android/app/build.gradle`

在dependencies部分添加以下内容：

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

4.3. 修改`android/app/src/main/java/com/yourprojectname/MainActivity.java`

在MainActivity.java文件中添加以下内容：

import com.facebook.react.devsupport.FacebookSdkPackage;

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

4.4. 修改`android/app/src/main/res/values/strings.xml`

在strings.xml文件中添加以下内容：

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

将YOUR_APP_ID替换为您的Facebook应用ID。

5. 使用Facebook登录

在您的React Native组件中，您可以使用以下代码来实现Facebook登录：

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;