Reactjs 反应导航：如何将array map（）数据传递到新屏幕（例如文章列表>；单个文章）

我正在从API中获取文章列表，并通过map（）函数显示它们。我已经成功地将它们全部显示在滚动视图中。现在我想显示我点击的一篇文章

我已经在父块上声明了一个键。现在我正在导航并将数据传递到另一个屏幕，但无论我尝试什么，它都会传递“未定义”

文章列表.js

    componentDidMount(){
      fetch(BASE_URL + PARAMS)
      .then(response => response.json())
      .then((responseJson) => {
        this.setState({
          loading:false,
          dataSource: responseJson.articles,
        }) 
      })
      .catch(error=>console.log(error))
    }


    renderArticles = () => {
      let articles = this.state.dataSource.map((article, key)=>{
        const { navigation, horizontal, style} = this.props;

        return (
          <Block key={key} row={horizontal} card flex style={[styles.product, styles.shadow, style]}>
            <TouchableWithoutFeedback onPress={() => navigation.navigate('Article', {article})}>
              <Block flex style={[styles.imageContainer, styles.shadow]}>
                <Image source={{ uri: article.image }} style={styles.fullImage} />
              </Block>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback>
              <Block flex space="between" style={styles.productDescription}>
                <Text size={16} style={styles.productTitle}>{article.title}</Text>
                <Text size={14} style={styles.productDescription}>{article.short_description}</Text>
                <Text size={12} >Posted on: {article.created_at}</Text>
                <Text size={12} >Key: {key}</Text>

              </Block>
            </TouchableWithoutFeedback>
          </Block>
        );
      });

      return (

          <ScrollView
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.articles}>
            <Block flex>
              {articles}
            </Block>
          </ScrollView>

      )
    }

    render() {
      return (
        <Block flex center style={styles.home}>
          {this.renderArticles()}
        </Block>
      );
    }

    render() {
        const { navigation, article} = this.props;
            return (
                 <Text >{article.title}</Text>
            )

    }

componentDidMount（）{
获取（基本URL+参数）
.then（response=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
加载：false，
数据来源：responseJson.articles，
}) 
})
.catch（错误=>console.log（错误））
}
渲染片段=（）=>{
让articles=this.state.dataSource.map（（article，key）=>{
const{navigation，horizontal，style}=this.props；
返回(
navigation.navigate（'Article'，{Article}）}>
{文章标题}
{文章.简短描述}
发布于：{article.created_at}
键：{Key}
);
});
返回(
{条款}
)
}
render（）{
返回(
{this.renderArticles（）}
);
}

Article.js

    componentDidMount(){
      fetch(BASE_URL + PARAMS)
      .then(response => response.json())
      .then((responseJson) => {
        this.setState({
          loading:false,
          dataSource: responseJson.articles,
        }) 
      })
      .catch(error=>console.log(error))
    }


    renderArticles = () => {
      let articles = this.state.dataSource.map((article, key)=>{
        const { navigation, horizontal, style} = this.props;

        return (
          <Block key={key} row={horizontal} card flex style={[styles.product, styles.shadow, style]}>
            <TouchableWithoutFeedback onPress={() => navigation.navigate('Article', {article})}>
              <Block flex style={[styles.imageContainer, styles.shadow]}>
                <Image source={{ uri: article.image }} style={styles.fullImage} />
              </Block>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback>
              <Block flex space="between" style={styles.productDescription}>
                <Text size={16} style={styles.productTitle}>{article.title}</Text>
                <Text size={14} style={styles.productDescription}>{article.short_description}</Text>
                <Text size={12} >Posted on: {article.created_at}</Text>
                <Text size={12} >Key: {key}</Text>

              </Block>
            </TouchableWithoutFeedback>
          </Block>
        );
      });

      return (

          <ScrollView
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.articles}>
            <Block flex>
              {articles}
            </Block>
          </ScrollView>

      )
    }

    render() {
      return (
        <Block flex center style={styles.home}>
          {this.renderArticles()}
        </Block>
      );
    }

    render() {
        const { navigation, article} = this.props;
            return (
                 <Text >{article.title}</Text>
            )

    }

render（）{
const{navigation，article}=this.props；
返回(
{文章标题}
)
}

我认为您需要使用

getParam（）

再次检索参数。请参阅文档

在Article.js中，执行以下操作：

render() {
    const { navigation} = this.props;
    const article = navigation.getParam("article"); 
    return (
       <Text >{article.title}</Text>
    );

}

render（）{
const{navigation}=this.props；
const article=navigation.getParam（“article”）；
返回(
{文章标题}
);
}