Реагировать на родной импорт изображения Facebook - PullRequest
0 голосов
/ 17 ноября 2018

Как я могу получить фотографию пользователя с идентификатором и так далее? Картина очень важна. Я уже пробовал разные примеры, но они не работали. Я хочу показать картинку на втором экране, но в данный момент это не так важно. Извините, я новичок в этом и не знаю, что делать.

  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>
          );
      }
  }
  })

Вот отладочное сообщение: {ошибка: {…}} ошибка : {message: "Синтаксическая ошибка" Ожидаемый конец строки вместо "(". "в символе 20: идентификатор, имя, изображение, тип (большой)", тип: "OAuthException", код: 2500, fbtrace_id: "DXFuk9C8gdT"} прото : Объективистские

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

вам не нужны дополнительные запросы.

Просто сделайте это.

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 отрегулирует размер фотографии в зависимости отсвойства ширины и высоты исходных фотографий и возвращают соответствующий размер изображения.Он вернется выше 600, но не ниже.Из-за изображения может быть не в квадратном формате.

0 голосов
/ 17 ноября 2018

Синтаксическая ошибка говорит о том, что с вызовом API что-то не так:

Неправильно

picture,type(large)

Правильно

picture.type(large)

Кстати, вы всегда можете (и должны) всегда пытаться использовать вызовы API в API Explorer: https://developers.facebook.com/tools/explorer/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...