React Navigation导航报错：需指定名称/键，求替代代码方案

错误原因 #

原代码中navigation.navigate(this.onClick())存在两个核心问题：

1. onClick是异步函数，调用后直接返回Promise对象，而非预期的路由名称字符串，导致React Navigation无法识别合法的路由参数，触发报错。
2. 异步函数的返回值需要通过await获取最终结果，直接传递Promise给navigate不符合API要求。

可行替代方案 #

方案一：在异步函数内部处理导航（推荐） #

将导航逻辑直接整合到onClick函数中，避免传递Promise给navigate：

1. 修改login.jsx的按钮点击事件：

<TouchableOpacity style={styles.button} onPress={() => this.onClick(navigation)}>
  <Icon style={styles.buttonIcon} name="arrow-right" size={30} color="white" type="feather" />
</TouchableOpacity>

2. 修改ParticleAuth.js中的onClick函数：

onClick = async (navigation) => {
  this.init();
  this.setLanguage();
  this.setChainInfo();
  this.login();
  const result = await particleAuth.isLogin();
  console.log('Result:', result);
  
  // 直接在函数内执行导航
  if (result) {
    navigation.navigate("LoggedIn");
  } else {
    navigation.navigate("Error");
  }
};

方案二：在点击事件中异步获取路由名称 #

如果需要保留onClick返回路由名称的逻辑，需在点击事件中用await获取异步结果：

1. 修改login.jsx的按钮点击事件：

<TouchableOpacity style={styles.button} onPress={async () => {
  const routeName = await this.onClick();
  navigation.navigate(routeName);
}}>
  <Icon style={styles.buttonIcon} name="arrow-right" size={30} color="white" type="feather" />
</TouchableOpacity>

2. ParticleAuth.js中的onClick函数可保持不变：

onClick = async () => {
  this.init();
  this.setLanguage();
  this.setChainInfo();
  this.login();
  const result = await particleAuth.isLogin();
  console.log('Result:', result);
  
  if (result) {
    return "LoggedIn";
  } else {
    return "Error";
  }
};

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