尝试解析模块'@react-native-community/google-signin‘时出错

Question

我只是遇到了一个问题，当我试图添加谷歌登录到我的应用程序。我安装了最新版本的@react-native-community/google-signin模块(v5.0.0)。我按照文档中的说明执行了所有操作，但当我运行我的应用程序时，我得到了以下错误：

error: Error: While trying to resolve module `@react-native-community/google-signin` from file `C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\app-screens\login.component.js`, the package `C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\@react-native-community\google-signin\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\@react-native-community\google-signin\index.js`. Indeed, none of these files exist:

  * C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\@react-native-community\google-signin\index.js(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\@react-native-community\google-signin\index.js\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
    at ResolutionRequest.resolveDependency (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:65:15)
    at DependencyGraph.resolveDependency (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at Object.resolve (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\lib\transformHelpers.js:267:42)
    at C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18)
    at C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
    at _next (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:107:9)

下面是我的代码中负责登录的部分：

import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import {Button, Layout, Icon} from '@ui-kitten/components';

import {GoogleSignin} from '@react-native-community/google-signin';
onGoogleButtonPress = async () => {
  const {idToken} = await GoogleSignin.signIn();
  const googleCredential = auth.GoogleAuthProvider.credential(idToken);
  return auth().signInWithCredential(googleCredential);
};

const GoogleIcon = (props) => <Icon name="google" {...props} />;
GoogleSignin.configure({
  webClientId:
    'xxx.apps.googleusercontent.com',
});

export const LoginScreen = () => {
  return (
    <SafeAreaView style={styles.mainContainer}>
      <Layout style={styles.contentContainer}>
        <Button
          accessoryLeft={GoogleIcon}
          onPress={() =>
            onGoogleButtonPress().then(() =>
              console.log('Signed in with Google!'),
            )
          }>
          Sign in with Google
        </Button>
      </Layout>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  contentContainer: {
    display: 'flex',
    flex: 1,
    width: '100%',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

你知道为什么会发生这种情况吗？

更新:当我使用React Native继续我的应用程序开发时，我收到了许多这样的错误，包不能工作。这就是我转而使用Flutter的原因之一。我开始使用Flutter已经一个月了，还没有遇到过这样的错误。它的包控制系统要好得多，它非常稳定，包总是有效的，它非常简单！你甚至不需要使用命令行！您只需将包名称(和版本)添加到pubspec.yaml文件中。我可以说Flutter是惊人的，我建议从React Native切换到Flutter。

Answer 1

@react-native-community/google-signin包已被弃用。但是，您可以使用@react-native-google-signin/google-signin。

要安装，请安装RN >= 0.60

npm i @react-native-google-signin/google-signin

yarn add @react-native-google-signin/google-signin

导入模块。

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

示例代码

// import statusCodes along with GoogleSignin
import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';

// Somewhere in your code
signIn = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    this.setState({ 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
    }
  }
};