Expo React Native应用Facebook登录失败：仅Expo Go出现主机名错误

UPDATE：该功能在iOS模拟器中可正常运行，但仅在Expo Go应用中无法使用。

开发Expo React Native托管应用时，集成Facebook登录始终遇到错误：

使用的是Expo官方示例代码：

const AuthScreen = () => {
import * as Facebook from 'expo-facebook';
    const loginWithFacebook = async () => {
        try {
            await Facebook.initializeAsync({
                appId: '<MYAPPID>',
            });
            const {type, token, expirationDate, permissions, declinedPermissions} =
                await Facebook.logInWithReadPermissionsAsync({
                    permissions: ['public_profile'],
                });
            if (type === 'success') {
                const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
                Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
            } else {
                // type === 'cancel'
            }
        } catch ({message}) {
            alert(`Facebook Login Error: ${message}`);
        }
    };

    return (
            <FontAwesome.Button name="facebook" onPress={loginWithFacebook}>Login With Facebook</FontAwesome.Button>
    )
};

已完成的配置步骤：

1. 在Facebook开发者平台创建应用'rainy'；
2. 在基本设置中添加iOS和Android平台：
   • iOS仅添加host.exp.Exponent作为Bundle ID；
   • Android仅添加哈希密钥rRW++LUjmZZ+58EbN5DVhGAnkX4=；
3. 在app.json的iOS配置中添加infoPlist属性：

...
  "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "facebookScheme": "fb<MYAPPID>",
        "facebookAppId": "<MYAPPID>",
        "FacebookClientToken": "abcxxxxx", // 从Settings > Advanced > Client Token获取
        "facebookDisplayName": "rainy",
        "facebookAutoLogAppEventsEnabled": false,
        "facebookAdvertiserIDCollectionEnabled": false
      }
    },
...

4. 尝试添加Valid OAuth Redirect URIs为https://auth.expo.io/@/rainy，但错误仍未解决。

已安装expo-facebook依赖，请问是否遗漏了步骤或操作有误？

针对Expo Go中Facebook登录失败的情况，可从以下几个方向检查：

1. 修正Valid OAuth Redirect URIs格式 #

你填写的https://auth.expo.io/@/rainy格式错误，正确格式应为https://auth.expo.io/<你的Expo用户名>/rainy，替换为你实际的Expo用户名即可。

同时在Facebook开发者后台产品 > Facebook登录 > 设置中：

• 开启「使用JavaScript SDK」选项；
• 将上述正确的Redirect URI添加到「Valid OAuth Redirect URIs」列表；
• 额外添加fbauth2://authorize到该列表，适配iOS Expo Go的跳转逻辑。

2. 确认Facebook应用权限与状态 #

• 确保你的Facebook应用处于开发模式（未上线前）；
• 将测试用的Facebook账号添加到应用的角色 > 测试用户或开发者列表，未添加的账号无法在开发模式下完成登录。

3. 补充Expo Go专属的Android签名哈希 #

Expo Go有默认的签名哈希，需在Facebook开发者后台的Android平台设置中添加：K8M158sBhmW+Yk/+F2hXUrN4F24=，否则Android端Expo Go无法正常完成登录校验。

4. 修复代码中的语法问题 #

你将import * as Facebook from 'expo-facebook';写在了组件内部，不符合React规范，需移到文件顶部：

import * as Facebook from 'expo-facebook';
import { Alert } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

const AuthScreen = () => {
    const loginWithFacebook = async () => {
        // 原有登录逻辑
    };

    return (
        <FontAwesome.Button name="facebook" onPress={loginWithFacebook}>Login With Facebook</FontAwesome.Button>
    )
};

5. 清除缓存并重启 #

• 清除Expo Go应用的缓存；
• 执行expo r -c命令重启Expo开发服务器；
• 在Expo Go中重新加载项目。

内容的提问来源于stack exchange，提问作者user6377312