基于React Native FBSDK在Android端禁用默认加载Spinner

嘿，我刚好处理过这个问题，给你分享下具体的解决方案，分Android和iOS两种情况来说：

Android 端解决方案 #

Android 这边的核心思路是修改 Facebook 登录原生 Activity 的主题，让它自带的加载 Spinner 不显示：

1. 打开项目中 android/app/src/main/AndroidManifest.xml 文件
2. 找到（如果没有就手动添加）Facebook 的 FacebookActivity 配置，给它设置 android:theme="@android:style/Theme.NoDisplay"
3. 注意保留 React Native FBSDK 要求的所有 meta-data 配置（比如 com.facebook.sdk.ApplicationId 这些是必须的，不能删）

示例代码如下：

<!-- Facebook 登录 Activity，设置隐藏主题 -->
<activity
    android:name="com.facebook.FacebookActivity"
    android:theme="@android:style/Theme.NoDisplay"
    android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />

<!-- 保留 RN FBSDK 必需的配置 -->
<meta-data
    android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id" />
<meta-data
    android:name="com.facebook.sdk.ClientToken"
    android:value="@string/facebook_client_token" />

这样设置后，原生的加载 Spinner 就不会弹出来了，你可以在 React Native 层面完全控制自定义加载组件的显示和隐藏。

iOS 端解决方案 #

iOS 这边没有直接禁用原生加载的配置，但我们可以通过监听登录流程的状态，用自定义 Spinner 覆盖原生的加载体验：

1. 在调用 LoginManager.logInWithReadPermissions() 之前，先显示你的自定义加载组件
2. 不管登录成功、失败还是被取消，都在 finally 块里隐藏自定义 Spinner

示例代码如下：

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

const FacebookLoginButton = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleLogin = async () => {
    setIsLoading(true);
    try {
      const result = await LoginManager.logInWithReadPermissions(['public_profile', 'email']);
      
      if (result.isCancelled) {
        console.log('用户取消了登录');
      } else {
        const accessToken = await AccessToken.getCurrentAccessToken();
        // 这里处理登录成功后的逻辑，比如请求后端接口
        console.log('登录成功，Token:', accessToken);
      }
    } catch (error) {
      console.log('登录失败:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <TouchableOpacity 
      onPress={handleLogin}
      disabled={isLoading}
      style={{ padding: 12, backgroundColor: '#1877f2', borderRadius: 8 }}
    >
      {isLoading ? (
        <ActivityIndicator color="#fff" />
      ) : (
        <Text style={{ color: '#fff', fontSize: 16, textAlign: 'center' }}>
          Facebook 登录
        </Text>
      )}
    </TouchableOpacity>
  );
};

export default FacebookLoginButton;

注意事项 #

• 不管是 Android 还是 iOS，都要确保自定义加载组件在整个登录流程中正确显示/隐藏，避免用户出现“点击没反应”的困惑
• 如果后续 React Native FBSDK 版本更新，记得检查 AndroidManifest 的配置是否还兼容，不过这个主题设置的方法稳定性很高

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