React Native：如何将Artikel组件的文章数据传递到DetailScreen

问题背景 #

在Homescreen中通过API获取新闻数据，传递给Artikel组件展示为列表，需要实现点击Artikel组件时，将对应文章的详情数据传递到DetailScreen页面。

解决方案步骤 #

1. 优化Homescreen传递数据的方式 #

将整个文章对象直接传递给Artikel组件，避免零散传递多个props，简化代码：

修改Homescreen.js中FlatList的renderItem部分：

<FlatList
  data={articles}
  renderItem={({ item }) => (
    <Artikel article={item} />
  )}
  keyExtractor={(item) => item.title}
/>

2. 修改Artikel组件，传递文章详情到DetailScreen #

在Artikel组件中，通过navigation.navigate将文章对象作为参数传递给DetailScreen：

修改Artikel.js：

const Artikel = ({ article }) => {
  const navigation = useNavigation();
  const goToDetail = () => {
    // 将整个文章对象传入详情页
    navigation.navigate("Detail", { article });
  };

  return (
    <SafeAreaView style={styles.container}>
      <Pressable onPress={goToDetail}>
        <Image
          style={styles.image}
          source={{ uri: article.urlToImage }}
        />
      </Pressable>
      <View style={{ paddingHorizontal: 20, paddingBottom: 10 }}>
        <Text style={styles.title}>{article.title}</Text>
        <Text style={styles.deskripsi} numberOfLines={3}>
          {article.description}
        </Text>
        <View style={styles.data}>
          <Text style={styles.h2}>
            source:<Text style={styles.sumber}> {article.source.name}</Text>
          </Text>
          <Text style={styles.tanggal}>
            {moment(article.publishedAt).format("MMM Do YY")}
          </Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default Artikel;

3. 修改DetailScreen组件，接收并展示传递的文章数据 #

使用useRoute钩子获取导航参数，然后渲染文章详情：

修改DetailScreen.js：

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

const DetailScreen = () => {
  const route = useRoute();
  // 从导航参数中取出文章对象
  const { article } = route.params;

  return (
    <SafeAreaView style={styles.container}>
      <Header />
      {/* 处理图片为空的情况 */}
      {article.urlToImage && (
        <Image
          source={{ uri: article.urlToImage }}
          style={styles.image}
        />
      )}
      <View style={styles.bodyartikel}>
        <Text style={styles.judul}>{article.title}</Text>
        <Text style={styles.artikel}>{article.description}</Text>
        <View style={styles.footer}>
          <Text style={styles.h1}>
            By: <Text style={styles.sumber}>{article.author || 'Unknown'}</Text>
          </Text>
          <Text>{moment(article.publishedAt).format("MMM Do YY")}</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default DetailScreen;

关键说明 #

• 使用navigation.navigate的第二个参数传递数据，支持传递对象类型
• 在详情页通过useRoute获取导航参数，这是React Navigation 5+版本的标准用法
• 处理了图片为空、作者为空的边界情况，避免渲染错误

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