时间戳

首页 > 解决方案 > 无法使用 navigation.navigate 导航到另一个屏幕

reactjs - 无法使用 navigation.navigate 导航到另一个屏幕

问题描述

我有一个带有函数的类登录：

  async _logInWithFacebook() {
    await Facebook.initializeAsync(fbConfig.APP_ID);
    const { type, token } = await Facebook.logInWithReadPermissionsAsync(
      fbConfig.APP_ID,
      {
        permissions: ["public-profile", "email"],
      }
    );
    if (type === "success") {
      this.props.login(token, "facebook");
      this.props.navigation.navigate("Home");
    } else {
      throw new Error("Something wrong with facebook auth");
    }
  }

当我按下按钮登录时，我会调用它。我还有一个 HomeScreen 类，我想在按下按钮后移动。 

class HomeScreen extends Component {
  componentDidMount() {
    this.props.fetchMyMeetups();
  }
  render() {
    const {
      myMeetups: { isFetched, data, error },
    } = this.props;
    return (
      <View style={styles.root}>
        <View style={styles.header}>
          <View style={styles.add}>
            <CreateMeetupScreen />
          </View>
        </View>
        <View style={styles.topContainer}>
          <Text>HomeScreen</Text>
        </View>
        <View style={styles.bottomContainer}>
          <MyMeetupsList meetups={data} />
        </View>
      </View>
    );
  }
}
export default HomeScreen;

还有我的导航器：

export function Navigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );

所以当我按下按钮时出现错误：[未处理的承诺拒绝：TypeError：未定义不是对象（评估'_ref.navigation'）]

标签： reactjsreact-nativereact-redux

解决方案

一开始，控制台在每个组件中记录您的道具并检查您是否在上面导航，然后不要忘记将您想要传递到下一个屏幕的道具作为导航功能的第二项传递，例如

this.props.navigation.navigate("Home",{SOME PROPS HERE});

然后您将能够在下一页中获取并使用它。我希望它有帮助<3

推荐阅读