React Native中react-native-google-signin组件报错如何排查解决

原有实现代码 #

import {
  GoogleSigninButton,GoogleSignin
} from '@react-native-google-signin/google-signin';
const CLIENT_ID = "client_id";

<GoogleSigninButton
  clientId={CLIENT_ID}
  render={(renderProps) => (
    <Button
      className={classes.googleButton}
      color="secondary"
      fullWidth
      onClick={renderProps.onClick}
      disabled={renderProps.disabled}
      variant="contained"
    >
      Google Sign In
    </Button>
  )}
  onSuccess={googleSuccess}
  onFailure={googleError}
  cookiePolicy="single_host_origin"
/>

注意：上述代码使用的是Web端React谷歌登录库的API，React Native版本的@react-native-google-signin/google-signin不存在render、onSuccess、onFailure、cookiePolicy这些属性，API不匹配也会触发运行异常，需要对照当前安装版本的文档调整调用逻辑。

错误排查与解决方法 #

错误1：RN GoogleSignin原生模块未正确链接 #

按以下优先级排查：

• 确认开发环境类型：如果使用Expo托管工作流（非bare裸工作流），不能直接使用@react-native-google-signin/google-signin，必须替换为Expo适配的谷歌登录依赖，Expo托管环境默认不支持自定义原生模块链接。
• 原生RN裸项目（0.60及以上版本，支持autolinking）：
  • 进入iOS目录执行pod install完成iOS端原生依赖安装，不需要执行手动link操作。
  • 依赖安装完成后，彻底关闭所有Metro进程、卸载设备/模拟器上已安装的旧版APP，重新执行原生编译命令（npx react-native run-android/npx react-native run-ios）安装新包，原生模块变更不能靠热更新生效，必须重编原生安装包。
• 0.60以下的低版本RN项目：执行npx react-native link @react-native-google-signin/google-signin完成手动链接，再对照文档检查Android端settings.gradle、MainApplication.java，iOS端Podfile、AppDelegate.m的配置项是否补全。

错误2：TypeError: null is not an object (evaluating 'RNGoogleSignin.SIGN_IN_CANCELLED') #

该错误和原生模块未正确链接是同源问题，除上述链接排查步骤外，补充以下检查项：

• 必须在APP入口初始化阶段调用GoogleSignin.configure()方法完成SDK初始化，传入谷歌云控制台申请的对应平台Client ID，Android、iOS端的Client ID不能混用。
• 检查依赖版本匹配度：安装的@react-native-google-signin/google-signin版本必须和当前项目的React Native大版本兼容，版本不兼容会直接导致原生模块导出为null。
• 清理缓存重装依赖：如果之前安装过旧版本依赖，依次执行以下命令清理缓存后重装：

  npm uninstall @react-native-google-signin/google-signin
  npm cache clean --force
  cd android && ./gradlew clean && cd ..
  cd ios && pod deintegrate && cd ..
  npm install @react-native-google-signin/google-signin
  cd ios && pod install && cd ..
  

错误3：Invariant Violation: "main" has not been registered #

该错误是前面模块加载失败连带触发的次生问题，排查点如下：

• 确认Metro运行目录：关闭所有Metro进程，进入项目根目录（存在package.json的文件层级）重新执行npx react-native start启动服务，不要在其他子目录下启动Metro。
• 检查入口文件配置：确认项目入口文件（一般为根目录下的index.js）中正确调用AppRegistry.registerComponent('main', () => App)，注册的组件名必须和原生端getMainComponentName()返回值一致，默认值为main不要随意修改。
• 前两类原生模块链接、API不匹配问题修复后，JS bundle执行中断的问题会同步解决，该注册报错会自动消失。

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