React Native实现FlatList点击项导航并传递关联数据

问题分析 #

你的核心问题有两个：

1. Boat组件中没有获取到navigation对象，导致无法调用navigate方法
2. 没有在跳转时将选中的船只数据传递给MainContainer

下面是具体的修改方案：

1. 修改DeviceList.js：给Boat组件传递点击回调 #

推荐用回调函数的方式实现组件解耦，避免子组件直接依赖导航对象，在FlatList的renderItem中传入点击事件的回调：

import * as React from 'react';
import { StyleSheet, View, FlatList, Button } from 'react-native';
import { SearchBar } from 'react-native-screens';
import MapView from 'react-native-maps';
import Boat from '../Data/Boat'


const imgYacht = "https://test.com/imgCabincruise.jpg"
const imgCatamaran = "https://test.com/imgCatamaran.jpg"
const imgNarrowboat = "https://test.com/imgNarrowboat.jpg"
const imgCabincruise = "https://test.com/imgCabincruise.jpg"


const boats = [
  { name: "boat1", boatImage: imgYacht},
  { name: "boat2", boatImage: imgCabincruise},
  { name: "boat3", boatImage: imgNarrowboat},
  { name: "boat4", boatImage: imgCabincruise},
  { name: "boat5", boatImage: imgCatamaran},
  { name: "boat6", boatImage: imgYacht},
];


export default function DeviceList({ navigation }) { // 修正组件名与文件名一致
  // 定义跳转回调，携带船只数据
  const handleBoatPress = (boat) => {
    navigation.navigate("MainContainer", { boatData: boat });
  }

  return (
    <View>
      <Button title="nextpage" onPress={() => navigation.navigate("MainContainer")} />
      <MapView/>

      <FlatList
        style={styles.scrollView}
        numColumns={2}
        data={boats}
        renderItem={({ item }) => (<Boat boat={item} onBoatPress={() => handleBoatPress(item)} />)}>
      </FlatList>
    </View>
  );
}

2. 修改Boat.js：使用传入的回调处理点击 #

移除未定义的navigation引用，替换为父组件传递的onBoatPress回调：

import React from 'react'
import { View, Text, Image, StyleSheet } from 'react-native'
import { TouchableOpacity } from 'react-native';

class Boat extends React.Component {
    render() {
        const { name, boatImage } = this.props.boat
        const { onBoatPress } = this.props
        return (
            <View style={styles.main_style}>
                <TouchableOpacity onPress={onBoatPress}>
                    <Image style={{ width: 150, height: 150, position: 'relative', }} source={{ uri: boatImage }} />
                    <Text>{name}</Text>
                </TouchableOpacity>
            </View >
        );
    }
}

// 补充基础样式
const styles = StyleSheet.create({
    main_style: {
        margin: 8,
        alignItems: 'center'
    }
})

export default Boat

3. 在MainContainer.js中接收传递的数据 #

通过route.params获取跳转时传递的船只数据：

import React from 'react';
import { View, Text, Image } from 'react-native';

export default function MainContainer({ route }) {
    const { boatData } = route.params;

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>船只名称：{boatData.name}</Text>
            <Image 
                style={{ width: 200, height: 200, marginTop: 20 }} 
                source={{ uri: boatData.boatImage }} 
            />
        </View>
    );
}

关键知识点 #

• 导航参数传递：用navigation.navigate('ScreenName', { 参数名: 参数值 })传递数据，目标组件通过route.params获取
• 组件解耦：子组件不直接依赖导航对象，通过父组件传递回调提升复用性
• FlatList渲染：确保每个列表项绑定对应数据源的事件处理函数

内容的提问来源于stack exchange，提问作者Dillion Cixx