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

Posted 2023-02-23

【中文标题】在 React Native 组件中使用 Facebook 登录功能

【英文标题】：Use the Facebook Login function in a React Native Component

【发布时间】：2020-09-10 05:13:55

【问题描述】：

我正在尝试在我的 react 本机应用程序中实现 Facebook 登录。 我正在关注本教程：https://dev.to/rishikeshvedpathak/react-native-login-with-facebook-4mmi 这很好用，我有 Facebook 登录按钮，一切正常。 但是他是在一个函数中实现的，我想把它实现到一个组件中。

我有一个带有 Facebook 登录按钮的组件，我希望这个按钮从我的 Facebook.js 文件中调用 FacebookLogin 函数，该文件包含上面教程中的代码。

我尝试像这样导入它：

import App from './Facebook.js'

然后在我的 TouchableOpacity 中使用“onPress”调用这样的函数： App.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：我正在使用 react-native-cli: 2.0.1 和 react-native: 0.61.4 和 expo 3.18.6

【参考方案1】：

好的，我做到了，我只是在组件声明之前声明了函数，所以我可以在我的组件中调用它。在函数中调用我的组件中的一些函数有点棘手，但现在一切正常，我可以通过我的登录组件登录到 Facebook！