在React Native组件中使用Facebook登录功能

Question

我正在尝试在我的react native应用程序中实现facebook登录，我按照这个教程来做。https:/dev.torishikeshvedpathakreact-native-login-with-facebook-4mmi。我有一个带有facebook登录按钮的组件，我想让这个按钮从我的Facebook.js文件中调用FacebookLogin函数，其中包含上面教程中的代码。

下面是教程中的代码。

import React, { useState } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ActivityIndicator } from 'react-native';
import * as Facebook from 'expo-facebook';

console.disableYellowBox = true;

export default function App() {

  const [isLoggedin, setLoggedinStatus] = useState(false);
  const [userData, setUserData] = useState(null);
  const [isImageLoading, setImageLoadStatus] = useState(false);

  facebookLogIn = async () => {
    Facebook.initializeAsync('My_App_id', 'My_App_name');
    try {
      const {
        type,
        token,
        expires,
        permissions,
        declinedPermissions,
      } = await Facebook.logInWithReadPermissionsAsync('My_App_id', 'My_App_name', {
        permissions: ['public_profile'],
      });
      if (type === 'success') {
        // Get the user's name using Facebook's Graph API
        fetch(`https://graph.facebook.com/me?access_token=${token}&fields=id,name,email,picture.height(500)`)
          .then(response => response.json())
          .then(data => {
            setLoggedinStatus(true);
            setUserData(data);
          })
          .catch(e => console.log(e))
      } else {
        // type === 'cancel'
      }
    } catch ({ message }) {
      alert(`Facebook Login Error: ${message}`);
    }
  }

  logout = () => {
    setLoggedinStatus(false);
    setUserData(null);
    setImageLoadStatus(false);
  }

  return (
    isLoggedin ?
      userData ?
        <View style={styles.container}>
          <Image
            style={{ width: 200, height: 200, borderRadius: 50 }}
            source={{ uri: userData.picture.data.url }}
            onLoadEnd={() => setImageLoadStatus(true)} />
          <ActivityIndicator size="large" color="#0000ff" animating={!isImageLoading} style={{ position: "absolute" }} />
          <Text style={{ fontSize: 22, marginVertical: 10 }}>Hi {userData.name}!</Text>
          <TouchableOpacity style={styles.logoutBtn} onPress={this.logout}>
            <Text style={{ color: "#fff" }}>Logout</Text>
          </TouchableOpacity>
        </View> :
        null
      :
      <View style={styles.container}>
        <Image
          style={{ width: 200, height: 200, borderRadius: 50, marginVertical: 20 }}
          source={require("../assets/logo_yorder.png")} />
        <TouchableOpacity style={styles.loginBtn} onPress={this.facebookLogIn}>
          <Text style={{ color: "#fff" }}>Login with Facebook</Text>
        </TouchableOpacity>
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e9ebee',
    alignItems: 'center',
    justifyContent: 'center',
  },
  loginBtn: {
    backgroundColor: '#4267b2',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 20
  },
  logoutBtn: {
    backgroundColor: 'grey',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 20,
    position: "absolute",
    bottom: 0
  },
});

这里是我组件中的TouchableOpacity。

<View style={styles.connexionServices}>
    <TouchableOpacity style={[styles.connexionFacebook, styles.connexionCommon]}>
        <Text style={styles.textButton}>Facebook</Text>
    </TouchableOpacity>
    <TouchableOpacity style={[styles.connexionGoogle, styles.connexionCommon]}>
        <Text style={styles.textButton}>Google</Text>
    </TouchableOpacity>
</View>

在这里，我想实现谷歌登录，所以如果你有一些技巧，这将是很好的:)

PS : I'm using react-native-cli: 2.0.1 and react-native: 0.61.4 with expo 3.18.6.

Answer 1

好了，我做到了，我只是在组件声明之前声明了这个函数，所以我可以在我的组件中调用它。在我的组件中调用一些函数有点麻烦，但现在一切都正常了，我可以通过我的登录组件登录到facebook了