世博会-Google SignIn在React Native中不起作用

时间:2019-10-01 09:23:46

标签: react-native expo google-signin

我已经使用Expo集成了GoogleSignIn。这是错误的。

enter image description here

代码:

    import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  Text,
  Image,
  TouchableOpacity,
  TextInput,
} from 'react-native';
// import Label from './../components/Label'
// import { Color } from "./../utils/color";
import * as GoogleSignIn from 'expo-google-sign-in';

export default class LoginScreen extends React.Component {

  state = { user: null };

  componentDidMount() {
    this.initAsync();
  }

  initAsync = async () => {
    await GoogleSignIn.initAsync({
      clientId: '1048124554926-pkms6k3sbusn5tp2lnah01d951k17lah.apps.googleusercontent.com',
    });
    this._syncUserWithStateAsync();
  };

  _syncUserWithStateAsync = async () => {
    const user = await GoogleSignIn.signInSilentlyAsync();
    this.setState({ user });
  };

  signOutAsync = async () => {
    await GoogleSignIn.signOutAsync();
    this.setState({ user: null });
  };

  signInAsync = async () => {
    try {
      // await GoogleSignIn.askForPlayServicesAsync();
      const { type, user } = await GoogleSignIn.signInAsync();
      if (type === 'success') {
        this._syncUserWithStateAsync();
      }
    } catch ({ message }) {
      alert('login: Error:' + message);
    }
  };

  onPress = () => {
    if (this.state.user) {
      this.signOutAsync();
    } else {
      this.signInAsync();
    }
  };

  render() {
    return (
      <SafeAreaView style={styles.Container}>
        <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}>
          <View style={styles.boxPadding}>
            <View style={styles.logoImg}>
              <Image style={styles.welcomeImage} source={require("../assets/images/robot-dev.png")} />
            </View>
            <TextInput
              placeholder="Email"
              style={styles.textInput} />
            <TextInput
              placeholder="Password"
              autoCompleteType="password"
              style={styles.textInput} />
            {/* <Label style={styles.forgotPasswordText}> Forgot Password ?</Label> */}
            <TouchableOpacity style={styles.button} >
              <Text style={styles.btnText}>Sign in</Text>
            </TouchableOpacity>
            <View style={styles.orLineMain}>
              <View style={styles.borderLine}></View>
              <Text style={styles.textOr}>Or</Text>
              <View style={styles.borderLine}></View>
            </View>
            <TouchableOpacity onPress={this.onPress} style={[styles.button, { marginBottom: 10, backgroundColor: '#F34A38', flexDirection: 'row', justifyContent: 'center' }]} >
              <Image style={styles.iconImg} source={require("./../assets/images/google-plus.png")} />
              <Text style={styles.btnText}>Sign in with Google</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.button, { marginBottom: 10, backgroundColor: '#007AAA', flexDirection: 'row', justifyContent: 'center' }]}>
              <Image style={styles.iconImg} source={require("./../assets/images/linkedin.png")} />
              <Text style={styles.btnText}>Sign in with Linkedin</Text>
            </TouchableOpacity>
            <View style={styles.textAccountMain}>
              <Text style={styles.textAccount}>You don't have an account?</Text>
              <TouchableOpacity><Text style={{ fontSize: 14, color: '#005961', marginLeft: 2, }}>Sign Up</Text></TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }

}

LoginScreen.navigationOptions = {
  header: null,
};
const styles = StyleSheet.create({
  Container: {
    flex: 1
  },
  boxPadding: {
    paddingLeft: 20,
    paddingRight: 20,
  },
  scrollView: {
    // backgroundColor: Colors.lighter,
  },
  logoImg: {
    alignItems: 'center',
  },
  textInput: {
    borderWidth: 1,
    borderColor: '#DEDEDE',
    width: '100%',
    borderRadius: 5,
    fontSize: 10,
    padding: 16,
    marginBottom: 8,

  },
  forgotPasswordText: {
    color: '#959596',
    alignSelf: 'flex-end',
    fontSize: 10,
    marginBottom: 20,
  },
  button: {
    width: '100%',
    alignItems: 'center',
    backgroundColor: '#005961',
    borderRadius: 5,
    padding: 14,
  },
  btnText: {
    color: '#ffffff',
    fontSize: 14,
  },
  orLineMain: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 32,
    marginBottom: 16,
  },
  textOr: {
    color: '#595A5A',
    fontSize: 14,
    width: '10%',
    textAlign: 'center'
  },
  borderLine: {
    width: '45%',
    height: 1,
    backgroundColor: '#DEDEDE'
  },
  iconImg: {
    marginRight: 10,
  },
  textAccountMain: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 54,
    marginBottom: 30,
  },
  textAccount: {
    fontSize: 14,
    color: 'red',
  },
  welcomeImage: {
    width: 100,
    height: 80,
    resizeMode: 'contain',
    marginTop: 3,
    marginLeft: -10,
  },
});

请帮助我怎么了。

谢谢。

0 个答案:

没有答案