如何在React Native应用中集成Facebook登录并解决react-native-fbsdk报错

你遇到的报错来源于两个核心问题：

1. 你使用的react-native-fbsdk官方已经停止维护，无法适配新版本React Native、Expo以及react-native-web环境
2. requireNativeComponent是React Native原生端（iOS/Android）专属的API，仅用于加载原生视图组件，web端的react-native-web没有提供这个API的导出，未适配web的react-native-fbsdk直接调用该API就会触发导出失败报错

你当前使用的是Expo 43版本，优先选择Expo官方维护的expo-facebook库实现登录，该库已自动适配当前版本的React Native、Expo以及web端，无需处理原生组件适配问题。
具体操作步骤如下：

• 第一步：卸载已弃用的旧库
  执行命令：

  npm uninstall react-native-fbsdk
  # 若使用yarn则执行：yarn remove react-native-fbsdk
  

• 第二步：安装Expo官方Facebook登录库
  执行命令自动匹配适配你当前Expo版本的依赖：

  expo install expo-facebook
  

• 第三步：在项目app.json中添加Facebook应用配置
  在expo配置项下新增如下字段，替换为你在Facebook开发者后台申请的对应参数：

  {
    "expo": {
      "facebookScheme": "fb<你的Facebook应用ID>",
      "facebookAppId": "<你的Facebook应用ID>",
      "facebookDisplayName": "<你的应用显示名称>"
    }
  }
  

• 第四步：替换原有登录逻辑代码
  修改App.tsx为如下内容，替换对应参数即可完成基础登录功能：

  import { StatusBar } from 'expo-status-bar';
  import React from 'react';
  import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
  import * as Facebook from 'expo-facebook';
  
  export default function App() {
    const handleFacebookLogin = async () => {
      try {
        // 初始化Facebook SDK，替换为自己的应用参数
        await Facebook.initializeAsync({
          appId: '你的Facebook应用ID',
          appName: '你的应用显示名称',
        });
        // 发起登录申请，可根据需求调整权限范围
        const loginResult = await Facebook.logInWithReadPermissionsAsync({
          permissions: ['public_profile', 'email'],
        });
  
        if (loginResult.type === 'success') {
          // 登录成功，获取访问令牌，可用于后续获取用户信息或对接自身后端
          const accessToken = loginResult.authenticationToken;
          console.log('登录成功，访问令牌：', accessToken);
        } else {
          // 用户取消登录
          console.log('用户取消了登录操作');
        }
      } catch (error) {
        console.error('登录过程发生错误：', error);
      }
    };
  
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.loginBtn} onPress={handleFacebookLogin}>
          <Text style={styles.btnText}>Facebook 登录</Text>
        </TouchableOpacity>
        <StatusBar style="auto" />
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    loginBtn: {
      backgroundColor: '#1877F2',
      paddingHorizontal: 28,
      paddingVertical: 12,
      borderRadius: 8,
    },
    btnText: {
      color: '#ffffff',
      fontSize: 16,
      fontWeight: '500',
    }
  });
  

如果后续你将Expo版本升级到45及以上，expo-facebook已停止维护，可切换到生态内维护更活跃的@react-native-firebase/auth模块的Facebook认证功能，适配性和维护性更强。

内容的提问来源于stack exchange，提问作者sergio.nava