React Navigation中FlatList点击商品跳转详情页传参问题

嘿，我来帮你搞定这个react-navigation的跳转传参问题！其实实现点击商品跳转到对应详情页并展示正确数据的方法很清晰，我给你两种实用方案，你可以按需选择：

这种方法最直观，也最可靠——点击商品时直接把当前商品的完整数据传给详情页，不需要依赖原数组的索引，避免后续数组变化导致的错误。

步骤1：在HomeScreen中添加跳转逻辑 #

假设你的商品数组是products，在渲染每个商品项时，给点击事件绑定导航操作，把当前商品作为参数传递：

import { TouchableOpacity, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();
  // 示例商品列表数据
  const products = [
    { id: 1, name: '商品A', price: 99, desc: '这是商品A的详细描述' },
    { id: 2, name: '商品B', price: 199, desc: '这是商品B的详细描述' },
  ];

  return (
    <View>
      {products.map((product) => (
        <TouchableOpacity
          key={product.id} // 务必用商品唯一ID作为key，不要用数组索引
          onPress={() => {
            // 跳转到DetailsScreen，同时传入当前商品数据
            navigation.navigate('DetailsScreen', {
              product: product,
            });
          }}
          style={{ padding: 16, borderBottomWidth: 1, borderColor: '#eee' }}
        >
          <Text style={{ fontSize: 16 }}>{product.name}</Text>
          <Text style={{ color: '#f40', marginTop: 4 }}>¥{product.price}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

步骤2：在DetailsScreen中接收并展示数据 #

用useRoute钩子获取传递过来的参数，然后渲染商品详情：

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

function DetailsScreen() {
  const route = useRoute();
  // 用可选链操作符避免参数未传递时报错
  const product = route.params?.product;

  // 处理没有商品数据的异常情况
  if (!product) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>未找到对应商品</Text>
      </View>
    );
  }

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 22, fontWeight: 'bold', marginBottom: 12 }}>{product.name}</Text>
      <Text style={{ fontSize: 18, color: '#f40', marginBottom: 16 }}>¥{product.price}</Text>
      <Text style={{ fontSize: 14, lineHeight: 20 }}>{product.desc}</Text>
    </View>
  );
}

如果你确实需要通过索引来定位商品，也可以实现，但要注意：如果原商品数组后续发生排序、新增/删除等变化，索引对应的商品可能会出错，所以仅在数组固定不变的场景下使用。

步骤1：HomeScreen传递索引和数组（或依赖全局状态） #

{products.map((product, index) => (
  <TouchableOpacity
    key={product.id}
    onPress={() => {
      navigation.navigate('DetailsScreen', {
        productIndex: index,
        products: products, // 如果数组是全局状态（比如Context/Redux），可以不用传递
      });
    }}
  >
    <Text>{product.name}</Text>
  </TouchableOpacity>
))}

步骤2：DetailsScreen通过索引获取商品 #

function DetailsScreen() {
  const route = useRoute();
  const { productIndex, products } = route.params;
  const product = products[productIndex];

  if (!product) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>商品不存在</Text>
      </View>
    );
  }

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>{product.name}</Text>
      <Text>¥{product.price}</Text>
      <Text>{product.desc}</Text>
    </View>
  );
}

额外注意事项 #

• 永远不要用数组索引作为列表项的key，这会导致React渲染异常，一定要用商品的唯一标识（比如id）。
• 用route.params?.xxx这种可选链语法，能避免用户直接进入详情页（比如通过深链接）时没有参数导致的崩溃。
• 如果是类组件，获取参数的方式是this.props.route.params，逻辑和函数组件一致。

内容的提问来源于stack exchange，提问作者J.range