React Native Google Sign-In 项目教程

1. 项目的目录结构及介绍

google-signin/
├── android/
│   ├── app/
│   ├── build.gradle
│   ├── gradle/
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── settings.gradle
├── ios/
│   ├── GoogleSignin.xcodeproj
│   ├── GoogleSignin.xcworkspace
│   ├── Podfile
│   ├── Podfile.lock
│   ├── Pods/
├── src/
│   ├── index.js
│   ├── GoogleSigninButton.js
│   ├── GoogleSignin.js
│   ├── types.js
├── .gitignore
├── .npmignore
├── LICENSE
├── package.json
├── README.md
├── tsconfig.json

目录结构介绍

• android/: 包含 Android 平台的项目文件，包括 Gradle 构建文件和应用模块。
• ios/: 包含 iOS 平台的项目文件，包括 Xcode 项目文件和 CocoaPods 依赖管理文件。
• src/: 包含项目的源代码文件，包括主要的 JavaScript 文件和类型定义文件。
• .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
• .npmignore: 指定 npm 包发布时忽略的文件和目录。
• LICENSE: 项目的开源许可证文件。
• package.json: 项目的 npm 配置文件，包含依赖项和脚本。
• README.md: 项目的说明文档。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

src/index.js

这是项目的入口文件，负责导出主要的模块和功能。通常情况下，它会导出 GoogleSignin 和 GoogleSigninButton 模块，供其他项目使用。

export { default as GoogleSignin } from './GoogleSignin';
export { default as GoogleSigninButton } from './GoogleSigninButton';

src/GoogleSignin.js

这是 Google Sign-In 功能的主要实现文件。它包含了初始化 Google Sign-In、处理登录和登出等功能的逻辑。

import { NativeModules, Platform } from 'react-native';

const { RNGoogleSignin } = NativeModules;

class GoogleSignin {
  // 初始化 Google Sign-In
  configure(options) {
    return RNGoogleSignin.configure(options);
  }

  // 处理登录
  signIn() {
    return RNGoogleSignin.signIn();
  }

  // 处理登出
  signOut() {
    return RNGoogleSignin.signOut();
  }
}

export default new GoogleSignin();

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的元数据和依赖项。以下是一些关键字段：

{
  "name": "@react-native-google-signin/google-signin",
  "version": "7.2.2",
  "description": "Google Signin for your react native applications",
  "main": "src/index.js",
  "scripts": {
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/google-signin": "^5.0.0"
  },
  "devDependencies": {
    "eslint": "^7.0.0",
    "jest": "^26.0.0"
  }
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了 TypeScript 编译器的选项。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

通过以上配置，项目可以正确地编译和运行，并且支持 TypeScript 类型检查。