Expo React Native Simulator Error: Facebook SDK has not been initialized yet

Question

我收到了 "Error: Facebook SDK has not been initialized yet" 我下面的代码是...

我的package.json文件配置信息：

    {
      "main": "node_modules/expo/AppEntry.js",
       "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
       "eject": "expo eject"
        },
       "dependencies": {
       "expo": "^36.0.0",
       "firebase": "^7.8.2",
       "react": "16.9.0",
       "react-dom": "16.9.0",
       "react-native": "https://github.com/expo/react native/archive/sdk-36.0.1.tar.gz",
       "react-native-web": "^0.11.7",
       "expo-facebook": "~8.0.0"
       },
    "devDependencies": {
    "babel-preset-expo": "^8.0.0",
    "@babel/core": "^7.0.0"
    },
   "private": true
    }

我的代码：

   import React from 'react';
   import { StyleSheet, 
   Text, 
   View, 
   TouchableHighlight, 
   TextInput} from 'react-native';
   import { f, auth, database } from './config/config';
   import * as Facebook from 'expo-facebook';


   export default class App extends React.Component {

   constructor(props)
   {

   super(props);
   this.state = {
   loggedin: false
   };
   //this.registerUser('testemailaddress@gmail.com',                                                                              
       'fakepassword');var that = this;
   f.auth().onAuthStateChanged(function(user) {
   if(user) {
   //Logged in
  that.setState({
  loggedin: true
 });
 console.log('Logged in', user);
 }else{
//Logged out
that.setState({
loggedin: false
});
 console.log('Logged out');
}
 });
}

loginUser = async(email, pass) => {
 if(email != '' && pass != '') {
 //
   try{
   let user = await auth.signInWithEmailAndPassword(email,          
    pass); console.log(user);
 }catch(error) {
   console.log(error);
 }
 }else{
 //if they are empty
 alert('Missing email or password');
 }
}
async loginWithFacebook (){

const{ type, token } = await Facebook.logInWithReadPermissionsAsync(
'APP_ID',
{ permissions: ['public_profile'] }
 );

  if(type === 'success'){
  const credentials =      f.auth.FacebookAuthProvider.credential(token);
   f.auth().signInWithCredential(credentials).catch((error) => {
     console.log('Error...', error);

   });

   }
  }


  registerUser = (email, password) => {

console.log(email, password);
auth.createUserWithEmailAndPassword(email, password)
.then((userObj) => console.log(email,password, userObj))
.catch((error) => console.log('error logging in', error));

   }

 signUserOut = () => {
auth.signOut()
.then(() => {
 console.log('Logged out...');
}).catch((error) => {
console.log('Error', error);
  });
 }

  render() {
    return (
    <View style={styles.container}>
     <Text>Open up App.js to start working on your app!</Text>
    <Text>---------</Text>
    { this.state.loggedin == true ? (
    <View>
    <TouchableHighlight
    onPress={ () => this.signUserOut()}
    style={{backgroundColor: 'red'}}>
      <Text> Log Out</Text>
    </TouchableHighlight>
    <Text> Logged in...</Text>
    </View>
  ) : (
    <View>

    { this.state.emailloginView == true ? (


      <View>
        <Text>Email:</Text>
        <TextInput
        onChangeText={(text) => this.setState({email: text})}
        value={this.state.email} />

      <Text>Password:</Text>
        <TextInput
        onChangeText={(text) => this.setState({pass: text})}
        secureTextEntry={true}
        value={this.state.pass}
         />

    <TouchableHighlight
    onPress={ () =>  this.loginUser(this.state.email,this.state.pass)}
    style={{backgroundColor: 'red'}}>
      <Text> Login</Text>
    </TouchableHighlight>

      </View>

    ) : (
      <View></View>
    )}

  <TouchableHighlight 
  onPress={() => this.setState({emailloginView: true})}
  style={{backgroundColor: 'green'}}>
  <Text style={{color:'white'}}> Login With Email</Text>
  </TouchableHighlight>

  <TouchableHighlight 
  onPress={() => this.loginWithFacebook()}
  style={{backgroundColor: 'green'}}>
  <Text style={{color:'white'}}> Login With Facebook</Text>
  </TouchableHighlight>
  </View>
  )}
</View>
  );
    }
    }
  const styles = StyleSheet.create({
  container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
  },
});

我正在使用内置 IOS 模拟器和物理 iPhone 7 plus 运行 我的 expo React Native 应用程序。从昨天开始我就一直在处理这个错误。有人可以帮我吗？

错误截图：

Answer 1

在调用 logInWitReadPermissions 之前你需要添加

Facebook.initializeAsync(appId, appName);

如Expo documentation

所述

Facebook.initializeAsync(appId: string | undefined, appName: string | undefined): Promise Calling this method ensures that the SDK is initialized. You have to call this method before calling logInWithReadPermissionsAsync to ensure that Facebook support is initialized properly. You may or may not provide an optional appId: string argument. If you don't provide it, Facebook SDK will try to use appId from native app resources (which in standalone apps you would define in app.json, in Expo client are unavailable and in bare you configure yourself according to Facebook setup documentation for iOS and Android). If it fails to find one, the promise will be rejected. If you provide an explicit appId, it will override any other source. The same resolution mechanism works for appName.