Expo Facebook登录成功后无法跳转至首页问题求助

看起来你已经把Facebook登录的核心逻辑跑通了，问题出在导航的调用方式上！我帮你揪出两个关键问题：

问题1：导航函数没有实际执行 #

你的navigateToScreen是一个返回函数的高阶函数，直接调用this.navigateToScreen('Home')只是拿到了导航函数，并没有真正触发导航动作，必须再加一对括号执行它（或者调整函数写法）。

问题2：未定义的navigateAction变量 #

你在FBlogIn里写了this.props.navigation.dispatch(navigateAction);，但navigateAction是navigateToScreen函数内部的局部变量，这里根本访问不到，这行代码会直接报错，打断后续逻辑。

修复后的完整代码 #

export default class LoginScreen extends Component { 
  navigateToScreen = (route, params = {}) => { 
    const navigateAction = NavigationActions.navigate({ routeName: route, params }); 
    this.props.navigation.dispatch(navigateAction); 
  } 

  // facebook login 
  FBlogIn = async () => { 
    try { 
      await Facebook.initializeAsync({ 
        appId: '[my app id is here]', 
      }); 
      const { type, token, expires, permissions, declinedPermissions } = await Facebook.logInWithReadPermissionsAsync({ 
        permissions: ["public_profile"] 
      }); 
      if (type === "success") { 
        // Get the user's name using Facebook's Graph API 
        const response = await fetch( 
          `https://graph.facebook.com/me?access_token=${token}` 
        ); 
        Alert.alert("Logged in!", `Hi ${(await response.json()).name}!`); 
        // 直接调用导航函数触发跳转
        this.navigateToScreen('Home'); 
      } else { 
        alert(`Facebook Login Error: Cancelled`); 
      } 
    } catch ({ message }) { 
      alert(`Facebook Login Error: ${message}`); 
    } 
  }; 

  render() { // 这里你之前漏了大括号，得补上才能正常渲染
    return ( 
      {/* for facebook signin */} 
      <Button rounded block onPress={this.FBlogIn} style={styles.button_start} activeOpacity={1}> 
        <Text style={{ color: '#222222', fontWeight: 'bold', fontSize: 14 }}>Login with Facebook</Text> 
      </Button> 
    )
  }
}

额外优化建议 #

其实你可以不用自己封装navigateToScreen，直接用React Navigation提供的更简洁的方式，代码会更直观：

// 去掉navigateToScreen方法，登录成功后直接写这行
this.props.navigation.navigate('Home');

另外还要确认你的导航容器配置里确实存在Home这个路由名称，避免因为拼写错误导致跳转失败。

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