如何在 TouchableOpacity 中传递链接或对象

Question

我是 React Native 的新手，我正在构建一个简单的新闻应用程序。我可以在 NewsListScreen 上获取并显示项目，但无法将对象传递到 NewsItemScreen 或打开链接以在浏览器中阅读文章。将不胜感激任何帮助。

这是我的卡片组件

import React from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { useDispatch, useSelector } from 'react-redux';

import * as newsAction from "./redux/actions/newsAction";


const Card = props => {

    const dispatch = useDispatch();
    const isFav = useSelector(state =>
        state.news.favorites.some(article => article.url === props.url)
    );

    return (
        <View style={styles.card}>
            <View style={styles.imageContainer}>
                <Image style={styles.image} source={{ uri: props.image }} />
            </View>
            <View style={styles.titleContainer}>
                <Text style={styles.title}>
                    {props.title.length > 25 ? props.title.slice(0, 25) + "..." : props.title}
                </Text>
                <>
                    <AntDesign
                        name={isFav ? 'heart' : 'hearto'}
                        size={24}
                        color="teal"
                        onPress={() => {
                            dispatch(newsAction.toggleFav(props.url))
                        }}
                    />
                </>
            </View>
            <View style={styles.descriptionContainer}>
                <Text style={styles.description}>
                    {props.description.length > 100 ? props.description.slice(0, 100) + "..." : props.description}
                </Text>
            </View>
        </View>
    )
}

export default Card;

这是新闻列表屏幕

import React, { useEffect, useState, useCallback } from 'react';
import { StyleSheet, View, FlatList } from 'react-native';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { Montserrat_400Regular, Montserrat_700Bold } from '@expo-google-fonts/montserrat';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useSelector, useDispatch } from 'react-redux';
import * as newsAction from '../src/components/redux/actions/newsAction';


import Card from '../src/components/Card';
import Header from '../src/components/Header';


export default function NewsListScreen({ navigation, props }) {

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(newsAction.fetchArticles());
  }, [dispatch]);

  const articles = useSelector(state => state.news.articles)
  console.log(articles);

  const [appIsReady, setAppIsReady] = useState(false)

  useEffect(() => {
    (async () => {
      try {
        await SplashScreen.preventAutoHideAsync();
        await Font.loadAsync({ Montserrat_400Regular, Montserrat_700Bold });
      }
      finally { setAppIsReady(true) }
    })();
  }, []);

  const onLayout = useCallback(() => {
    if (appIsReady) {
      SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <FlatList onLayout={onLayout}
      data={articles}
      keyExtractor={item => item.url}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => {navigation.navigate('NewsItem')}}>
          <Card
            title={item.title}
            description={item.description}
            image={item.urlToImage}
            url={item.url}
          />
        </TouchableOpacity >
      )}
    />
  );
}

这是新闻项目屏幕。这里还没有任何工作...

import React from 'react'
import { View, StyleSheet, Text } from 'react-native';
import NewsListScreen from './NewsListScreen';
import Card from '../src/components/Card';

const NewsItemScreen = (props) => {

  return (
    <View>
        <Text>{item.url}</Text>
    </View>
  )
}

export default NewsItemScreen;

Answer 1

1. 要在浏览器中打开链接，您可以使用“react-native”中的链接

    import { Linking } from "react-native";
     .... 
     .... 
     ....
   
     <TouchableOpacity
       onPress={() => {
         Linking.openURL("https://www.google.com/");
       }}
     >
     ... 
     ...
     ...
     </TouchableOpacity>
   

2. 以及在路线之间传递数据..您可以在这里找到信息https://reactnavigation.org/docs/params/