如何获取用户ID邮件图片等?图片非常重要。我已经尝试过不同的示例,但是它们没有用。我想在第二个屏幕上显示图片,但目前还不重要。很抱歉,我对此并不陌生,真的不知道该怎么办。
import React from 'react';
import {
StyleSheet,
Text,
View,
Button,
Alert,
TouchableOpacity,
TextInput,
Switch,
Image
} from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
import { LoginManager,LoginButton,AccessToken,GraphRequest,GraphRequestManager} from 'react-native-fbsdk';
import { createStackNavigator } from 'react-navigation';
import * as firebase from 'firebase';
EStyleSheet.build({
$textColor: 'white'
});
export default class HomeScreen extends React.Component {
constructor(props){
super(props);
this.state = {userInfo: null,};
}
static navigationOptions = {
title: "Socialmedia",
};
renderImage(){
console.log(this.state.userInfo);
this.render(
<View>
<Image source={{url: this.state.userInfo.photoURL}} />
</View>
)
}
//Facebook login
async loginWithFacebook() {
try {
const {
type,
token,
expires,
permissions,
declinedPermissions,
} = await Expo.Facebook.logInWithReadPermissionsAsync('262997934355158', {
permissions: ['public_profile'],
});
if (type === 'success') {
const credential = firebase.auth.FacebookAuthProvider.credential(token)
//this.props.navigation.navigate('Second', {});
firebase.auth().signInAndRetrieveDataWithCredential(credential).catch((error) => {
console.log(error)
})
// Get the user's name using Facebook's Graph API
const response = await fetch(`https://graph.facebook.com/me?access_token=${token}&fields=id,name,picture,type(large)`);
const userInfo = await response.json();
this.setState({userInfo});
this.renderImage();
} else {
// type === 'cancel'
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
//Google login
async loginWithGoogle() {
const { type, token } = await await Expo.Google.logInAsync({
//androidClientId: YOUR_CLIENT_ID_HERE,
iosClientId: '258088831368-h42kgsqarctlpuaugksgqeh6plkh0ese.apps.googleusercontent.com',
scopes: ['profile', 'email'],
});
if (type == 'success') {
const credential = firebase.auth.GoogleAuthProvider.credential(token)
firebase.auth().signInAndRetrieveDataWithCredential(credential).catch((error) => {
console.log(error)
})
}
}
//339771303079-3mse4b0pvur499bof3ri61heahjtsj9f.apps.googleusercontent.com
render() {
return(
<View style={styles.container}>
<View style={styles.container}><TouchableOpacity style={[styles.buttons, {backgroundColor: '#3b5998'}]} onPress={this.loginWithFacebook.bind(this)}>
<Image style={styles.img} source={require("../assets/Facebook.png")}/><Text style={{left: 20, color: 'white'}}>Facebook</Text>
</TouchableOpacity></View>
<View style={styles.container}><TouchableOpacity style={styles.buttons} onPress={() => this.loginWithGoogle()}>
<Image style={styles.img} source={require("../assets/Google.png")}/><Text style={{left: 20}}>Login with Google</Text>
</TouchableOpacity></View>
<View style={styles.container}><TouchableOpacity style={styles.buttons}>
<Text>Github</Text>
</TouchableOpacity></View>
<View style={styles.container}><TouchableOpacity style={styles.buttons}>
<Text>Play Spiele</Text>
</TouchableOpacity></View>
<View style={styles.container}><TouchableOpacity style={styles.buttons}>
<Text>Twitter</Text>
</TouchableOpacity></View>
</View>
);
}
}
})
那是调试消息: {错误:{…}} 错误 : {消息:“语法错误”,而不是字符20处的字符串的预期结尾,而不是“(”。”,id,名称,图片,类型(大)”,类型:“ OAuthException”,代码:2500,fbtrace_id:“ DXFuk9C8gdT”} 原始 : 对象
答案 0 :(得分:0)
语法错误告诉您API调用有问题:
错误
picture,type(large)
正确
picture.type(large)
顺便说一句,您可以(而且应该)始终先在API资源管理器中尝试API调用:https://developers.facebook.com/tools/explorer/
答案 1 :(得分:0)
您不需要额外的请求。
只需这样做。
firebase.auth().signInAndRetrieveDataWithCredential(credential)
.then(data => {
let {photoURL} = data.user
// now you got the photoURL
// to retrieve different sizes of photo url simply do
let largerImage = photoURL+"?height=600"
})
一个简单的请求。
height = 600将根据原始照片的width&height属性调整照片尺寸,并返回适当的图像尺寸。它将返回600以上,但不会低于600。由于图像可能不是正方形格式。