React Native FBSDK获取用户名邮箱失败及跨屏展示方案咨询

Hey there! I see you're trying to grab a user's name and email from Facebook to build their in-app profile, but you're hitting a wall with missing data. Let's break down how to fix this step by step.

1. Update Your Login Permissions #

First off, your current readPermissions only includes public_profile—but to get the user's email, you must explicitly request the email permission from Facebook. Without it, Facebook won't return that data at all.

Update your LoginButton like this:

<LoginButton
  readPermissions={['public_profile', 'email']}
  onLoginFinished={(error, result) => {
    if (error) {
      console.log('Login failed:', error);
    } else if (result.isCancelled) {
      console.log('Login cancelled');
    } else {
      // Fetch user data once login succeeds
      this.fetchFacebookUserData();
    }
  }}
  onLogoutFinished={() => console.log('User logged out')}
/>

2. Correctly Fetch User Data via Graph API #

Once the user logs in successfully, you need to send a Graph API request to fetch the specific fields you need (name and email). Here's how to implement the fetchFacebookUserData method:

fetchFacebookUserData = () => {
  const infoRequest = new GraphRequest(
    '/me',
    {
      accessToken: AccessToken.getCurrentAccessToken().accessToken,
      parameters: {
        fields: {
          string: 'name,email' // Specify the fields you want to retrieve
        }
      }
    },
    (error, result) => {
      if (error) {
        console.log('Failed to fetch user data:', error);
      } else {
        console.log('User data:', result);
        // Store this data for use across your app
        this.storeUserData(result);
      }
    }
  );

  // Execute the request
  new GraphRequestManager().addRequest(infoRequest).start();
};

3. Store the Data for Cross-Page Access #

To use this data on other pages, you'll need to persist it somewhere. A simple option is AsyncStorage (built into React Native), or you can use state management tools like Context API or Redux for more complex apps.

Here's an example with AsyncStorage:

import AsyncStorage from '@react-native-async-storage/async-storage';

storeUserData = async (userData) => {
  try {
    await AsyncStorage.setItem('userProfile', JSON.stringify(userData));
    console.log('User profile saved successfully');
  } catch (e) {
    console.log('Failed to save user profile:', e);
  }
};

4. Retrieve and Display Data on Other Pages #

On any other screen where you want to show the user's profile, fetch the stored data and render it:

import AsyncStorage from '@react-native-async-storage/async-storage';

class ProfileScreen extends React.Component {
  state = {
    userProfile: null
  };

  componentDidMount() {
    this.loadUserData();
  }

  loadUserData = async () => {
    try {
      const storedProfile = await AsyncStorage.getItem('userProfile');
      if (storedProfile) {
        this.setState({ userProfile: JSON.parse(storedProfile) });
      }
    } catch (e) {
      console.log('Failed to load user profile:', e);
    }
  };

  render() {
    const { userProfile } = this.state;
    if (!userProfile) return <Text>Loading profile...</Text>;

    return (
      <View>
        <Text>Welcome, {userProfile.name}!</Text>
        <Text>Your email: {userProfile.email}</Text>
      </View>
    );
  }
}

Quick Notes to Remember #

• Make sure your Facebook App is properly configured in the Facebook Developer Dashboard (enable email permission in your app's settings).
• If you're still not getting the email, some users might have their email hidden or not associated with their Facebook account—always handle cases where email might be null.

内容的提问来源于stack exchange，提问作者Rafael V. Vega