Кнопка входа в sdk для Facebook с поддержкой React не работает

Я пытаюсь использовать react-native-fbsdk для входа в систему. Я выполнил шаги из React Native FBSDK. У меня не было ошибок от xcode, когда я его запустил.

Когда я запускаю react-native run-ios, у меня нет ошибки, и я даже вижу facebook Login Button, но когда я нажимаю кнопку, это не приводит меня на страницу входа в facebook. Ничего не произошло. Ниже мой код:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';

export default class App extends Component<Props> {

  loginFacebook(){
  LoginManager.logInWithReadPermissions(["public_profile"]).then(
    function(result) {
      if (result.isCancelled) {
        console.info("Login cancelled");
      } else {
        console.info(
          "Login success with permissions: " +
            result.grantedPermissions.toString()
        );
      }
    },
    function(error) {
      console.info("Login fail with error: " + error);
    }
  );
  }

  render() {
    return (
      <View style = {styles.container}>
      <LoginButton
          onLoginFinished = {
            (error, result) => {
              if (error) {
                console.info("login has error: " + result.error);
              } else if (result.isCancelled) {
                console.info("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    console.info(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished = {() => console.info("logout.")}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

Есть идеи, что происходит?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
2 405
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Можете ли вы попробовать использовать этот код из fbsdk, он передает некоторые реквизиты кнопке, вы можете забыть это сделать:

<LoginButton
          onLoginFinished = {
            (error, result) => {
              if (error) {
                console.info("login has error: " + result.error);
              } else if (result.isCancelled) {
                console.info("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    console.info(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished = {() => console.info("logout.")}/>

Другим способом вы можете попробовать использовать вместо этого LoginManager, используя этот код: Создайте кнопку для входа в facebook:

<button onclick = {this.loginFacebook}> </button>

Создайте функцию для входа в Facebook:

loginFacebook(){
LoginManager.logInWithReadPermissions(["public_profile"]).then(
  function(result) {
    if (result.isCancelled) {
      console.info("Login cancelled");
    } else {
      console.info(
        "Login success with permissions: " +
          result.grantedPermissions.toString()
      );
    }
  },
  function(error) {
    console.info("Login fail with error: " + error);
  }
);
}

Спасибо за комментарии. Я пробовал код, но выдает ошибку Cannot read property 'error' of null

kirimi 18.12.2018 09:10

Вы можете где-нибудь разместить свой код? Я проверю для вас.

Tony Bui 18.12.2018 09:11

Можете ли вы создать еще одну кнопку (<button onclick = {this.loginFacebook}> </button>) и импортировать {LoginManager}, чтобы протестировать функцию loginFacebook ()?

Tony Bui 18.12.2018 10:09

Я сделал <Button onPress = {this.loginFacebook} title = "Login"> </Button>, но когда я нажимаю кнопку, ничего не происходит.

kirimi 18.12.2018 10:16

В вашем коде нет ничего плохого. Если ничего не случилось, я думаю, вы что-то пропустили, когда устанавливаете библиотеку. Попробуйте переустановить fbsdk снова, npm start --clear-cache, и снова запустите проект.

Tony Bui 18.12.2018 10:31

Мне удалось успешно использовать приведенный выше код или код, использованный в примере из developers.facebook.com/docs/react-native/login, в обоих случаях в результате на некоторое время запрашивается модальное окно с загружаемым изображением, пока оно не завершится с ошибкой Login fail with error: Error: net::ERR_NAME_NOT_RESOLVED. Я пытаюсь использовать локальный эмулятор Android Studio. Что я должен увидеть после щелчка? Приложение должно открывать браузер устройства для ввода данных доступа? Можно ли протестировать этот поток в эмуляторе?

3ky 18.09.2020 17:38
Ответ принят как подходящий

Я понял. Я не знаю, сколько времени я трачу на то, чтобы это исправить!

Оказалось, что это ошибка с FacebookSDKs-iOS-4.39.0. Мне пришлось понизить ее до FacebookSDKs-iOS-4.38.0.

С этого сайта Я скачал старую версию, и она заработала!

Я исправил это, запустив приложение с терминала react-native run-android

Я работаю с: "react-native": "0.60.5", "react-native-fbsdk": "^ 1.0.4"

Другие вопросы по теме