我对世博会有疑问。我正在使用 RN 谷歌登录来实现跨平台谷歌登录以及 Firebase JS-sdk
网络上错误
未捕获错误：RN GoogleSignin 本机模块不正确 已链接。请阅读自述文件、设置和故障排除说明 小心。如果您使用的是 Expo，请确保您使用的是 Custom dev 客户，不是世博会去
当我使用googole登录按钮时发生错误 像那样 注册屏幕.tsx
import {GoogleSignin,GoogleSigninButton} from '@react-native-google-signin/google-signin';
//...
<GoogleSigninButton
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Light}
// onPress={}
//disabled={}
style={{ width:'100%', height:SIZES.xxSmall}}
/>
app.json：
"ios": {
"config": {
"usesNonExemptEncryption": false
},
"supportsTablet": true,
"bundleIdentifier": "bundleIdentifier",
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./src/assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
},
"package": "my package"
},
"web": {
"bundler": "metro",
"favicon": "./src/assets/favicon.png"
},
"experiments": {
"tsconfigPaths": true
},
"extra": {
"eas": {
"projectId": "projectId"
}
},
"plugins": [
"expo-font",
**"@react-native-google-signin/google-signin"**
],
"owner": "owner"
metro.config.ts
const { getDefaultConfig } = require("expo/metro-config");
module.exports = (() => {
const config = getDefaultConfig(__dirname);
const { transformer, resolver } = config;
config.transformer = {
...transformer,
babelTransformerPath: require.resolve("react-native-svg-transformer")
};
config.resolver = {
...resolver,
assetExts: resolver.assetExts.filter((ext:any) => ext !== "svg"),
sourceExts: [...resolver.sourceExts, "svg",'cjs','mjs','d.ts',
]
};
return config;
})();
package.json：
dependencies:{
"firebase": "^10.7.0",
"@react-native-google-signin/google-signin": "^11.0.0",
"@reduxjs/toolkit": "^1.9.7",
"expo": "^50.0.0",
"expo-auth-session": "~5.4.0",
"expo-crypto": "~12.8.0",
"expo-dev-client": "~3.3.5",
"expo-system-ui": "~2.9.3",
"expo-web-browser": "~12.8.1",
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.49.2",
"react-native": "^0.73.2",}
GoogleLogin.tsx
import React,{useEffect ,useState} from 'react'
import * as WebBrowser from 'expo-web-browser';
import { makeRedirectUri } from 'expo-auth-session';
import app,{ auth,provider } from '../../../firebaseConfig';
import {
GoogleSignin,
statusCodes,
GoogleSigninButton,} from '@react-native-google-signin/google-signin';
import {Web_Client_ID } from "../../utils/clientKeys";
const GoogleLogin =() => {
const googleSigninConfig = ():void =>{
GoogleSignin.configure({
webClientId:Web_Client_ID ,
scopes: ["profile", "email"],
offlineAccess: true,
forceCodeForRefreshToken: true,
profileImageSize: 120,
});
}
const onAuthStateChanged = (user:any)=> {
if(user){
console.log(user)
}else{
//set user info to null
}
}
useEffect(() => {
googleSigninConfig()
getCurrentUserInfo()
const subscriber = auth().onAuthStateChanged(onAuthStateChanged)
//triggered once user either log in or out
return subscriber;
},[])
const signinWithGoogle = async () => {//ongoogle btn press
try {
await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
const userInfo = await GoogleSignin.signIn();
const {idToken, accessToken} = await GoogleSignin.getTokens()
console.log(idToken,accessToken)
const credential =
firebase.auth.GoogleAuthProvider.credential(idToken, accessToken,);
await auth().signInWithCredential(credential);
} catch (error :any) {
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
console.log('SIGN_IN_CANCELLED')
} else if (error.code === statusCodes.IN_PROGRESS) {
console.log('IN_PROGRESS')
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
console.log('PLAY_SERVICES_NOT_AVAILABLE')
} else {
// some other error happened
}
}
}
//return nyll if user didnt signin previously
const getCurrentUserInfo = async () => {
try {
const userInfo = await GoogleSignin.signInSilently()
console.log(userInfo)
} catch (error :any) {
if (error.code === statusCodes.SIGN_IN_REQUIRED) {
console.log('SIGN_IN_REQUIRED')
} else {
console.log('error')
}
}
}
const GoogleSignout = async ()=>{
try {
await GoogleSignin.revokeAccess()
await GoogleSignin.signOut()
//.then(() => alert('Your are signed out!'));
// setloggedIn(false);
} catch (error :any) {
// Alert.alert('Something else went wrong... ', error.toString())
}
}
}
实现它的步骤 1_ Expo 管理工作流程
2_开发构建eas build --profile开发--platform android
3_ npx expo 安装@react-native-google-signin/google-signin
4_expo doctor 没有发现项目有任何问题
5_ npx expo 预构建 --clean
6_ npx expo 启动 --dev-client
在 android 模拟器上卡在启动屏幕中，没有任何问题“Android 捆绑完成”。
在网上给出上面的错误
github 文档说遵循自述文件说明，但与我的设置没有什么不同。 这个自述文件 https://github.com/react-native-google-signin/google-signin/blob/master/README.md 我做错了什么？这个错误的原因是什么？ 或者是否缺少任何设置？
对于遇到类似问题的人， 它只是与 Web 平台的 Firebase 设置相关
import {Platform} from 'react-native';
import { initializeApp, } from "firebase/app";
import { getStorage } from 'firebase/storage';
import Constants from "expo-constants";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { getFirestore, enableIndexedDbPersistence } from "firebase/firestore";
// @ts-ignore
import{initializeAuth, GoogleAuthProvider , inMemoryPersistence,
getReactNativePersistence,setPersistence,}from 'firebase/auth';
import firebase from "firebase/compat/app"
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/functions';
let app: firebase.app.App;
firebase.apps.length === 0 ?
app = firebase.initializeApp(firebaseConfig)
: app = firebase.app();
export const db = getFirestore(app);
const persistence =
Platform.OS === 'web' //this line
?inMemoryPersistence as any //this line
:getReactNativePersistence(AsyncStorage);
export const auth = initializeAuth(app, { persistence });
export const provider = new GoogleAuthProvider();
export const database = getFirestore();
const storage = getStorage(app);
export {app}