我是 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;
要在浏览器中打开链接,您可以使用“react-native”中的链接
import { Linking } from "react-native";
....
....
....
<TouchableOpacity
onPress={() => {
Linking.openURL("https://www.google.com/");
}}
>
...
...
...
</TouchableOpacity>
以及在路线之间传递数据..您可以在这里找到信息https://reactnavigation.org/docs/params/