Android端React Native应用登录/请求权限时出现空白白框如何解决

原因分析 #

这个空白白框大概率是三星One UI系统下，react-native-google-signing底层原生代码触发了无文本的Toast。部分版本的该库在处理登录/权限流程时，可能调用了Toast.makeText()但未传入有效文本内容，而三星系统对空文本Toast的渲染会显示为空白白框，而非直接隐藏。

解决方案 #

1. 排查并修复第三方库中的空白Toast调用 #

找到react-native-google-signing的原生模块代码（通常在node_modules/react-native-google-signing/android/src/main/java目录下），搜索Toast.makeText相关调用：

• 如果发现类似Toast.makeText(context, "", Toast.LENGTH_SHORT).show()的代码，将空字符串替换为null或直接移除该Toast调用。
• 修改后重新编译项目，测试是否还会出现空白框。

2. 在App层全局拦截空白Toast #

如果无法修改第三方库代码，可以在MainActivity中通过反射拦截所有空白Toast：

import android.widget.Toast
import java.lang.reflect.Field
import android.os.Bundle

class MainActivity : ReactActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        hookEmptyToast()
    }

    private fun hookEmptyToast() {
        try {
            val toastClass = Toast::class.java
            val showMethod = toastClass.getDeclaredMethod("show")
            showMethod.isAccessible = true
            
            val originalShow = showMethod.invoke(null) as () -> Unit
            showMethod.invoke(object : () -> Unit {
                override fun invoke() {
                    val textField = toastClass.getDeclaredField("mText")
                    textField.isAccessible = true
                    val text = textField.get(this) as CharSequence?
                    if (text.isNullOrEmpty()) {
                        // 拦截空白Toast，不执行显示逻辑
                        return
                    }
                    originalShow.invoke()
                }
            })
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }
}

这段代码通过反射拦截Toast的show方法，当检测到Toast文本为空时，阻止其显示。

3. 排查自研原生模块与其他依赖 #

检查自研Java原生模块和其他npm包，确认是否存在主动调用空白Toast的情况（比如权限请求回调中误触发的Toast），找到后移除或修正相关代码。

4. 升级或替换Google登录组件 #

查看react-native-google-signing的官方仓库，确认是否有针对三星设备的兼容更新，升级到最新稳定版本；如果问题仍存在，可以考虑替换为@react-native-google-signin/google-signin等维护更活跃的Google登录组件。

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