Реагируйте с навигацией: как передать данные массива map () на новый экран (например, список статей> отдельная статья)

Question

Я получаю список статей из API и отображаю их с помощью функции map (). Я успешно отобразил их в ScrollView. Теперь я хотел бы показать одну из статей, на которые я нажал.

Я уже объявил ключ в родительском блоке. И теперь я перемещаюсь и передаю данные на другой экран, но все, что я пробовал, передается как «неопределенное».

Список статей. 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>
      );
    }

Article.js

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

    }

Answer 1

Я думаю, вам нужно использовать getParam(), чтобы снова получить параметры.См. Документацию здесь .

В Article.js выполните следующие действия:

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

}