Expo Router中点击图片跳转Modal页面无法获取数据求助

在React Native（Expo）项目中，点击FlatList中的图片卡片，通过Expo Router的router.push方法将对应项的数据传递到Modal页面，但Modal页面无法获取到传递的exercice数据。应用可正常打开Modal页面，但日志显示exercice为undefined。

相关代码 #

app/(drawer)/Exercices/index.js #

const Exercice = () => {
  return (
    <View style={styles.container}>
      <FlatList
        style={styles.FlatListStyle}
        data={ExercicesDetails}
        numColumns={1}
        keyExtractor={(item) => item.name}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: 50, paddingTop: 20 }}
        renderItem={({ item, index }) => (
          <ExerciceCard index={index} item={item} />
        )}
      />
    </View>
  );
};

const ExerciceCard = ({ item, index }) => {
  const router = useRouter();
  return (
    <View style={{ flex: 1 }}>
      <TouchableOpacity
        style={styles.ImageContainer}
        onPress={() => {
          console.log("Selected Item:", item);
          router.push({
            pathname: "/ExercicesModal/ExerModal",
            state: { exercice: item },
          });
        }}
      >
        <Image
          source={item.image}
          resizeMode="cover"
          style={styles.stretchingImage}
        />
      </TouchableOpacity>
    </View>
  );
};

app/ExercicesModal/ExerModal.js #

const ExerModal = () => {
  const { exercice } = useRouter();
  const router = useRouter;
  console.log("Exercice:", exercice); // Log msg
  return (
    <View style={styles.container}>
      <Image
        source={exercice ? exercice.image : null}
        resizeMode="cover"
        style={styles.stretchingImage}
      />
    </View>
  );
};

日志信息 #

LOG  Selected Item: {"image": 26, "instruction": "1.Clasp your hands in front of you and lower your head in line with your arms.
2.Press forward and hold for 10 to 30 seconds.", "name": "Forward Stretch"}
LOG  Exercice: undefined

解决方案 #

问题出在Modal页面的useRouter使用方式错误，以及state数据的获取路径不对：

1. 错误1：const router = useRouter;没有调用钩子函数，应该写成const router = useRouter();
2. 错误2：通过router.push传递的state数据存储在router.state属性中，不是直接挂载在router根对象上

修正后的ExerModal.js代码：

const ExerModal = () => {
  const router = useRouter();
  const { exercice } = router.state || {}; // 加|| {}避免state为undefined时报错
  console.log("Exercice:", exercice);
  return (
    <View style={styles.container}>
      <Image
        source={exercice ? exercice.image : null}
        resizeMode="cover"
        style={styles.stretchingImage}
      />
    </View>
  );
};

或者也可以直接解构state：

const ExerModal = () => {
  const { state: { exercice } = {} } = useRouter();
  console.log("Exercice:", exercice);
  return (
    <View style={styles.container}>
      <Image
        source={exercice ? exercice.image : null}
        resizeMode="cover"
        style={styles.stretchingImage}
      />
    </View>
  );
};

这样就能正确获取到通过router.push传递的exercice数据，日志输出会和Selected Item一致。

内容的提问来源于stack exchange，提问作者Mohamed Ali Abid