我已经使用Expo集成了GoogleSignIn。这是错误的。
代码:
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,
},
});
请帮助我怎么了。
谢谢。