React Native点击TouchableOpacity跳转页面并传递图片ID的问题

一、发起跳转的页面（当前页面） #

在TouchableOpacity的点击事件里，调用navigation.navigate时，第二个参数传入需要传递的图片ID。示例代码如下：

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

const HomeScreen = () => {
  const navigation = useNavigation();

  // 模拟你的图片数据列表
  const imageList = [
    { id: 'pic_001', imgUrl: 'https://example.com/img1.jpg' },
    { id: 'pic_002', imgUrl: 'https://example.com/img2.jpg' },
    { id: 'pic_003', imgUrl: 'https://example.com/img3.jpg' },
  ];

  // 处理图片点击事件，传递ID
  const goToDetail = (imageId) => {
    navigation.navigate('DetailScreen', { imgId: imageId });
  };

  return (
    <View style={styles.container}>
      {imageList.map(img => (
        <TouchableOpacity
          key={img.id}
          style={styles.imgWrapper}
          onPress={() => goToDetail(img.id)}
        >
          <Image
            source={{ uri: img.imgUrl }}
            style={styles.image}
          />
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    gap: 15,
  },
  imgWrapper: {
    borderRadius: 8,
    overflow: 'hidden',
  },
  image: {
    width: '100%',
    height: 200,
  },
});

export default HomeScreen;

二、接收参数的目标页面 #

通过useRoute钩子获取传递过来的ID，再根据ID匹配对应的数据进行展示：

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

const DetailScreen = () => {
  const route = useRoute();
  // 取出传递的图片ID
  const { imgId } = route.params;

  // 模拟完整的详情数据，根据ID匹配
  const detailData = [
    {
      id: 'pic_001',
      imgUrl: 'https://example.com/img1.jpg',
      title: '自然风光',
      desc: '这是一张来自山野的自然风光照片，记录了清晨的薄雾与山峦。'
    },
    {
      id: 'pic_002',
      imgUrl: 'https://example.com/img2.jpg',
      title: '城市夜景',
      desc: '繁华都市的夜晚，霓虹闪烁，车流不息，展现现代都市的活力。'
    },
    {
      id: 'pic_003',
      imgUrl: 'https://example.com/img3.jpg',
      title: '动物特写',
      desc: '林间小鹿的特写镜头，温顺的眼神让人感受到自然的治愈力。'
    },
  ];

  // 根据ID筛选对应的数据
  const currentItem = detailData.find(item => item.id === imgId);

  // 处理数据不存在的情况
  if (!currentItem) {
    return (
      <View style={styles.emptyContainer}>
        <Text>未找到对应图片的详情数据</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Image
        source={{ uri: currentItem.imgUrl }}
        style={styles.detailImage}
      />
      <Text style={styles.title}>{currentItem.title}</Text>
      <Text style={styles.desc}>{currentItem.desc}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 15,
    gap: 12,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  detailImage: {
    width: '100%',
    height: 300,
    borderRadius: 10,
  },
  title: {
    fontSize: 22,
    fontWeight: '600',
    textAlign: 'center',
  },
  desc: {
    fontSize: 16,
    lineHeight: 24,
    color: '#666',
  },
});

export default DetailScreen;

三、注意事项 #

1. 确保你的导航栈中已经注册了两个页面，比如使用Stack Navigator：

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="HomeScreen">
      <Stack.Screen name="HomeScreen" component={HomeScreen} options={{ title: '图片列表' }} />
      <Stack.Screen name="DetailScreen" component={DetailScreen} options={{ title: '图片详情' }} />
    </Stack.Navigator>
  );
};

export default AppNavigator;

2. 如果你使用的是类组件，获取参数的方式为this.props.route.params.imgId，跳转方式为this.props.navigation.navigate('DetailScreen', { imgId: imageId })。

内容的提问来源于stack exchange，提问作者Eli W