React Native新闻APP问题：如何在TouchableOpacity传递对象/跳转链接

一、传递新闻对象到NewsItemScreen #

1. 修改NewsListScreen的导航参数 #

在NewsListScreen的TouchableOpacity点击事件中，将当前新闻对象作为参数传递给详情页：

<TouchableOpacity onPress={() => {navigation.navigate('NewsItem', { article: item })}}>
  <Card
    title={item.title}
    description={item.description}
    image={item.urlToImage}
    url={item.url}
  />
</TouchableOpacity >

2. 更新NewsItemScreen获取并展示内容 #

替换原NewsItemScreen代码，从路由参数中接收新闻对象并展示：

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

const NewsItemScreen = ({ route }) => {
  // 从路由参数中获取传递的新闻对象，可选链避免未定义报错
  const article = route.params?.article;

  if (!article) {
    return <View style={styles.container}><Text>未找到新闻内容</Text></View>;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{article.title}</Text>
      <Text style={styles.description}>{article.description}</Text>
      {/* 后续添加打开链接按钮 */}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  description: {
    fontSize: 16,
    marginBottom: 20,
  }
})

export default NewsItemScreen;

二、实现浏览器打开文章链接 #

在NewsItemScreen中添加打开链接的逻辑：

// 新增打开链接的函数
const openArticleLink = () => {
  Linking.openURL(article.url);
};

// 在return的JSX中添加按钮
<TouchableOpacity style={styles.button} onPress={openArticleLink}>
  <Text style={styles.buttonText}>在浏览器中阅读全文</Text>
</TouchableOpacity>

// 补充按钮样式到styles中
button: {
  backgroundColor: 'teal',
  padding: 12,
  borderRadius: 8,
},
buttonText: {
  color: 'white',
  textAlign: 'center',
  fontSize: 16,
}

依赖说明 #

• 纯React Native项目：Linking是内置模块，无需额外安装。
• Expo项目：若使用expo-linking，先执行安装命令：

npx expo install expo-linking

再替换导入语句：

import * as Linking from 'expo-linking';

可选优化：简化Card组件点击逻辑 #

可以将点击事件集成到Card组件内部，减少外层嵌套：

1. 修改Card组件，新增onPress属性：

const Card = props => {
  // ...原有代码
  return (
    <TouchableOpacity style={styles.card} onPress={props.onPress}>
      {/* 原有Card内容 */}
    </TouchableOpacity>
  )
}

2. 在NewsListScreen中直接给Card传递点击事件：

<Card
  title={item.title}
  description={item.description}
  image={item.urlToImage}
  url={item.url}
  onPress={() => navigation.navigate('NewsItem', { article: item })}
/>

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