React Native中如何将数组索引作为Props传递给嵌套页面？

安全阿岳

2026-8-26

解决React Native中Pressable跳转传索引的语法错误问题

你遇到的Unexpected token, expected ","错误，大概率是传递参数时的语法写错了——在navigation.navigate的第二个参数里误用了JSX属性的写法，正确的方式是传递对象字面量。

错误写法示例（导致报错）

// 错误：把参数写成了JSX属性格式index={itemIndex}，这会触发语法错误
<Pressable onPress={() => navigation.navigate('COURSE', index={itemIndex})}>

正确的参数传递写法

在navigate的第二个参数里用标准对象键值对传递索引：

programList.map((program, itemIndex) => (
  <Pressable 
    key={itemIndex} 
    onPress={() => navigation.navigate('COURSE', { programIndex: itemIndex })}
  >
    {/* 列表项内容，比如显示program名称 */}
    <Text>{program.title}</Text>
  </Pressable>
))

在COURSE页面接收索引

目标页面通过useRoute钩子获取传递的参数，再从全局数组programList中取出对应实例：

import { useRoute } from '@react-navigation/native';

function CourseScreen() {
  const route = useRoute();
  // 可选链操作符?避免参数未传递时的报错
  const programIndex = route.params?.programIndex;
  const targetProgram = programList[programIndex];

  // 后续使用targetProgram做业务逻辑
  return (
    <View>
      <Text>{targetProgram?.description}</Text>
    </View>
  );
}