Facebook 登录不断重复询问权限 React Native？

Question

我是 React Native 的新手，正在努力为我的应用程序创建 Facebook 登录。

我完成了我的应用程序的所有要求配置，Firebase 和 Facebook 开发人员。

问题是当我第一次按下登录时，它一直重复登录权限。在 data 收到 accessToken 和 id 之前，我的应用程序 might/might 不会导航到 Main 屏幕（登录成功）。但仅仅1秒后，屏幕再次提示并显示登录管理器。它一直在重复。我真的不知道为什么。

是不是我的代码有问题？。我认为它一直在重复，因为它必须这样做，直到它获得数据需求（承诺已解决）

代码如下：

import React, { useEffect, useState } from 'react';
import {
    View,
    ImageBackground,
    StyleSheet,
    Alert
} from 'react-native';
import {
    Layout
} from '@ui-kitten/components';
import { GoogleSignin, GoogleSigninButton, statusCodes } from '@react-native-community/google-signin';
import { firebase } from '@react-native-firebase/auth';
import { LoginButton, LoginManager, AccessToken } from 'react-native-fbsdk';

const GoogleLogIn = (props) => {

    const [userInfo, setUserInfo] = useState(null);
    const [isLogIn, setIsLogIn] = useState(false);

    // Facebook log in
    const _facebookLogin = async () => {
        try{
            const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
            console.log(result);

            if(result.isCancelled){
                console.log('Login is cancelled');
            }else if(result.grantedPermissions){
                console.log('DONE')
                const data =  await AccessToken.getCurrentAccessToken();
                console.log(data);
                const cred = firebase.auth.FacebookAuthProvider.credential(data.accessToken);
                const firebaseCred = await firebase.auth().signInWithCredential(cred);
                setIsLogIn(true);
                setUserInfo(data.userID);
                props.navigation.navigate('AppNavigator', {screen: 'Welcome'})
            }
        }catch(err){
            console.log(err);
            throw err;
        }
    }

    return(
        <View style={styles.background}>

            <LoginButton
                onLoginFinished={_facebookLogin}
                onLogoutFinished={() => console.log('Logout!')}
            />

        </View>
    );
};

const styles = StyleSheet.create({
    background: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})
export default GoogleLogIn;

这是奇怪的行为：

Error_repeating asking permissions for login Facebook

请帮忙！

Answer 1

useState函数貌似又导致渲染出问题了。您可以尝试使用 useCallback

useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

用法

const _facebookLogin =  useCallback( async () => {
      try{
          const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
          console.log(result);

          if(result.isCancelled){
              console.log('Login is cancelled');
          }else if(result.grantedPermissions){
              console.log('DONE')
              const data =  await AccessToken.getCurrentAccessToken();
              console.log(data);
              const cred = firebase.auth.FacebookAuthProvider.credential(data.accessToken);
              const firebaseCred = await firebase.auth().signInWithCredential(cred);
              setIsLogIn(true);
              setUserInfo(data.userID);
              props.navigation.navigate('AppNavigator', {screen: 'Welcome'})
          }
      }catch(err){
          console.log(err);
          throw err;
      }
  },[])

Answer 2

这是我发现它运行良好的代码。您可以将其放入自定义按钮中

const  facebookLogin = async () => {
        try {
            const result = await LoginManager.logInWithPermissions(['public_profile', 'email']).then(
                (res) => {
                    if(res.isCancelled){
                        console.log('Something went wrong, please try again');
                    }else{
                        AccessToken.getCurrentAccessToken().then(
                            async (data) => {
                              console.log(data.accessToken.toString())
                              const cred = firebase.auth.FacebookAuthProvider.credential(data.accessToken);
                              const firebaseCred = await firebase.auth().signInWithCredential(cred);
                              setIsLogIn(true);
                              setUserInfo(data.userID);
                              props.navigation.navigate('AppNavigator', {screen: 'Welcome'})
                            }

                          )
                    }
                }
            )
        } catch (err) {
            console.log(err);
        }
      }

Facebook 登录不断重复询问权限 React Native？

Facebook Login keeps repeating asking permissions React Native?

javascript

reactjs

react-native

async-await

react-native-fbsdk