React Native谷歌登录异常：无法点击下一步、找回邮箱或创建账户按钮

模拟器截图

无法点击找回邮箱、创建账户或下一步按钮，点击后无任何反应，停留在当前登录页面。帮助、隐私和条款按钮可正常使用。

相关功能代码编写在googlesignin.tsx文件中：

import React, { Component } from 'react'
import { Button } from 'react-native'
import {
    GoogleSignin,
    statusCodes,
} from '@react-native-google-signin/google-signin';

export class GoogleSign extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: null,
        };
    }

    render() {
        return(
            <Button title={'Sign in with Google'} onPress={async () => {
                GoogleSignin.configure({
                    iosClientId: '552669576534-ninopsfqvitpk59v9kt42mn0r2e4o37h.apps.googleusercontent.com',
                    webClientId: '552669576534-vpmbo9vbodnaeqghnjai6d0fhcl2enhc.apps.googleusercontent.com',
                    offlineAccess: true,
                });
                try {
                    await GoogleSignin.hasPlayServices();
                    const userInfo = await GoogleSignin.signIn();
                    this.setState({userInfo});
                    console.log(userInfo);
                } catch (error) {
                    if (error.code === statusCodes.SIGN_IN_CANCELLED) {
                        // user cancelled the login flow
                    } else if (error.code === statusCodes.IN_PROGRESS) {
                        // operation (e.g. sign in) is in progress already
                    } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
                        // play services not available or outdated
                    } else {
                        // some other error happened
                    }
                }
            }}/>
        );
    }
}

已将反向URL添加到工作区中。

排查建议 #

• 检查事件绑定：确认无响应按钮的onPress事件是否正确绑定，避免出现onPress={handleFunc()}这种错误写法（会立即执行函数而非绑定）。
• 排查组件遮挡：使用React Native调试工具查看组件层级，确认按钮是否被上层透明View/Modal等组件遮挡，可临时移除疑似遮挡组件测试。
• 验证状态逻辑：如果按钮依赖表单校验等状态启用，检查相关状态变量是否正确更新，是否存在视觉上显示可点击但实际处于禁用状态的情况。
• 调整Google登录配置时机：当前GoogleSignin.configure写在按钮点击回调内，建议移至componentDidMount初始化阶段，避免重复配置引发潜在冲突：

  componentDidMount() {
    GoogleSignin.configure({
      iosClientId: '552669576534-ninopsfqvitpk59v9kt42mn0r2e4o37h.apps.googleusercontent.com',
      webClientId: '552669576534-vpmbo9vbodnaeqghnjai6d0fhcl2enhc.apps.googleusercontent.com',
      offlineAccess: true,
    });
  }
  

• 切换测试环境：尝试在真实设备上测试，排除模拟器交互兼容性问题；同时确保模拟器的Google Play服务版本符合项目要求。
• 日志定位问题：在无响应按钮的onPress中添加console.log，确认事件是否触发。若未触发，聚焦绑定问题；若触发了，查看控制台是否有未捕获的错误信息。

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