帮助,假设我从一个API(在Homescreen.js中)获得了一组数据,然后将其发送到一个名为"文章.js"的组件,我应该如何将这些文章中的每一篇文章中的数据发送到一个名为"DetailScreen.js"的屏幕.请谁帮帮我,我会非常非常感激的,提前感谢并为我糟糕的英语表示歉意

const Homescreen = () => {
  const [articles, setArticles] = useState([]);

  const getArticles = () => {
    axios
      .get(
        "https://newsapi.org/v2/top-headlines?country=us&apiKey=API_KEY",
        {
          params: {
            category: "technology",
          },
        }
      )
      .then((response) => {
        setArticles(response.data.articles);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {});
  };

  useEffect(() => {
    getArticles();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={articles}
        renderItem={({ item }) => (
          <Artikel
            urlToImage={item.urlToImage}
            title={item.title}
            description={item.description}
            author={item.author}
            publishedAt={item.publishedAt}
            sourceName={item.source.name}
            url={item.url}
          />
        )}
        keyExtractor={(item) => item.title}
      />
    </SafeAreaView>
  );
};

export default Homescreen;

文章.js

const Artikel = (props) => {
  const navigation = useNavigation();
  const goToDetail = () => {
    navigation.navigate("Detail", {judul: 'Asu'});
  };

  // const goToSource = () => {
  //   WebBrowser.openBrowserAsync(props.url);
  // };

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

export default Artikel;

"DetailScreen.js"

const DetailScreen = (props) => {
  return (
    <SafeAreaView style={styles.container}>
      <Header />
      <View style={styles.image}>
        <Image
          source={{
            uri: props.thumbnail,
          }}
          style={styles.image}
        />
      </View>

      <View style={styles.bodyartikel}>
        <Text style={styles.judul}>PROPS TITLE</Text>
        <Text style={styles.artikel}>
          PROPS.ARTICLE
        </Text>
        <View style={styles.footer}>
          <Text style={styles.h1}>
            By: <Text style={styles.sumber}>Salman</Text>
          </Text>
          <Text>12 Okt 2020</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default DetailScreen;

i tried to make a list of the datas i need in 文章.js and made it into a list, but it didnt work

推荐答案

因此,在您的Article.js人中,您调用了一个导航到DetailScreen.js的方法.你已经可以这样做了.

Article.js年中:

<Pressable onPress={() => goToDetail(props)}> // pass props as argument
  <Image
    style={styles.image}
    source={{
      uri: props.urlToImage,
    }}
  />
</Pressable>

现在,在您的goToDetail方法中:

// Catch passed arguments as props   
const goToDetail = (props) => {
  navigation.navigate('Details', {
    title: props.title,
    description: props.description,
  })
// As for now just passing title and description from props
};

现在要访问Detail.js:中传递的数据

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

const DetailScreen = () => {
  let route = useRoute(); // using route hooks
  let {title, data} = route.params
  return (
    <YourComponent/>
  );
};

通过这种方式,您可以将数据从一个屏幕传递到另一个屏幕.有关更多详细信息,请访问REACT原生导航文档:https://reactnavigation.org/docs/params

Javascript相关问答推荐

setcallback是什么时候放到macrotask队列上的?

如何从隐藏/显示中删除其中一个点击?

在react JS中映射数组对象的嵌套数据

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

从包含数百行的表中获取更改后的值(以表单形式发送到后端)的正确方法是什么?

您能在卸载程序(QtInsteller框架)上添加WizardPage吗?

将内容大小设置为剩余可用空间,但如果需要,可在div上显示滚动条

基于props 类型的不同props ,根据来自接口的值扩展类型

为什么JPG图像不能在VITE中导入以进行react ?

在查看网页时,如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键?

ngOnChanges仅在第二次调用时才触发

在将元素追加到DOM之前,createElement()是否会触发回流?混淆abt DocumentFragment行为

如何调整下拉内容,使其不与其他元素重叠?

使用python,我如何判断一个html复选框是否被隐藏,以及它是否被S选中?

如何在不将整个文件加载到内存的情况下,在Node.js中实现Unix粘贴命令?

调试jQuery代码以获取所有行的总和(票证类型)

为什么我的Reaction组件不能使用createBrowserRouter呈现?

如何调用多个$HTTP.POST请求?

Chart.js根据 Select 显示数据

使用可重用组件组织Reaction项目的最佳方式是什么