React Native Expo环境下如何将Facebook登录用户名传递至Profile页面

我正在用 React Native + Expo 开发应用，已经实现了 Facebook 登录功能并能获取到用户名。现有 FacebookLogin 组件和 Profile 组件代码如下，功能运行正常，但需要把登录后获取到的 userInfo.name 传递到 Profile 页面并显示出来，请求帮助实现这个参数传递和显示的功能。

FacebookLogin 组件代码：

export default class FacebookLogin extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { userInfo: null }; 
  } 
  _handleFacebookLogin = async () => { 
    try { 
      const { type, token } = await Facebook.logInWithReadPermissionsAsync( 
        'my own app is not a problem', 
        { permissions: ['public_profile'] } 
      ); 
      switch (type) { 
        case 'success': { 
          const response = await fetch( 
            `https://graph.facebook.com/me?access_token=${token}` 
          ); 
          const userInfo = await response.json(); 
          this.setState({ userInfo }); 
          Alert.alert('Logged in!', `Hi ${userInfo.name}`); 
          this.props.facebookloginpress(); 
          break; 
        } 
        case 'cancel': { 
          Alert.alert('Cancelled!', 'Login was cancelled!'); 
          break; 
        } 
        default: { 
          Alert.alert('Oops!', 'Login failed!'); 
        } 
      } 
    } catch (e) { 
      Alert.alert('Oops!', 'Login failed!'); 
    } 
  }; 
  render() { 
    return ( 
      <View style={styles.container}> 
        <Button title="Login with Facebook" onPress={this._handleFacebookLogin} /> 
      </View> 
    ); 
  } 
}

Profile 组件代码：

export default class Profile extends React.Component { 
  constructor(props) { 
    super(props); 
  } 
  handleSignOutPress = () => { 
    this.props.navigation.navigate('LoginScreen'); 
  }; 
  render() { 
    return ( 
      <View style={{ flex: 1, justifyContent: 'space-around' }}> 
        <Text>This text take a facebook username</Text> 
        <Button backgroundColor="#03A9F4" title="SIGN OUT" onPress={this.handleSignOutPress} /> 
      </View> 
    ); 
  } 
}

实现这个需求很简单，只需要分两步：在登录成功时传递用户名参数，在 Profile 页面接收并显示参数，具体修改如下：

1. 修改 FacebookLogin 组件，传递用户名参数 #

登录成功后，你调用了 this.props.facebookloginpress() 来触发跳转（假设这个方法是用来导航到 Profile 页面的），我们需要把获取到的 userInfo.name 作为参数传进去：

// 在 FacebookLogin 组件的 success 分支里
case 'success': {
  const response = await fetch(
    `https://graph.facebook.com/me?access_token=${token}`
  );
  const userInfo = await response.json();
  this.setState({ userInfo });
  Alert.alert('Logged in!', `Hi ${userInfo.name}`);
  // 把用户名作为参数传递给 facebookloginpress 方法
  this.props.facebookloginpress(userInfo.name); 
  break;
}

然后，在提供 facebookloginpress 方法的父组件里（比如你的导航容器组件），需要修改这个方法，让它在导航到 Profile 页面时带上参数：

// 父组件中的 facebookloginpress 方法示例
facebookloginpress = (userName) => {
  // 导航到 Profile 页面，并传递 userName 参数
  this.props.navigation.navigate('Profile', { userName });
};

2. 修改 Profile 组件，接收并显示用户名 #

在 Profile 组件中，我们可以通过 this.props.navigation.getParam() 来获取传递过来的参数，然后替换掉原来的文本：

export default class Profile extends React.Component { 
  constructor(props) { 
    super(props); 
  } 
  handleSignOutPress = () => { 
    this.props.navigation.navigate('LoginScreen'); 
  }; 
  render() { 
    // 获取传递过来的用户名，第二个参数是默认值（如果没拿到参数时显示）
    const userName = this.props.navigation.getParam('userName', 'Guest');
    return ( 
      <View style={{ flex: 1, justifyContent: 'space-around' }}> 
        {/* 显示用户名 */}
        <Text>Hi {userName}!</Text> 
        <Button backgroundColor="#03A9F4" title="SIGN OUT" onPress={this.handleSignOutPress} /> 
      </View> 
    ); 
  } 
}

如果你的项目使用的是 React Navigation 5 及以上版本，获取参数的方式会略有不同，需要通过 route 对象获取：

// Profile 组件的 render 方法中
const { userName } = this.props.route.params || { userName: 'Guest' };

这样修改后，当用户成功登录 Facebook 并跳转到 Profile 页面时，就能看到显示对应用户名的文本了。

内容的提问来源于stack exchange，提问作者Alisan26