Как отобразить один пост из моего списка постов в моем приложении, созданном с помощью React Native и Apollo? - PullRequest
Новая
       12

Как отобразить один пост из моего списка постов в моем приложении, созданном с помощью React Native и Apollo?

0 голосов
/ 07 ноября 2019

Итак, я пытаюсь создать приложение, похожее на блог. И я не уверен, как сделать один пост, который был выбран для чтения. 

<TouchableWithoutFeedback onPress={ () => this.props.navigation.navigate('Unique')}>
  <Text style={styles.titleStyle}>{post.title}</Text>
</TouchableWithoutFeedback>

^ Это событие приводит меня к сообщению, на которое я нажал (не знаю, как передать его реквизиты или идентификатор)

И это компонент, на который я перенаправлен:

class Page extends Component {
  render(){
    return(
      <ScrollView>
        <Query query={UniqueNews}>
          {({data, loading})=> {
            if(loading) return <Text>Loading</Text>;
            const {posts} = data;
            return posts.map(post=>
              <OneNews key={post.id} post={post} />
            )
          }}
        </Query>
      </ScrollView>
    )
  }
}

const UniqueNews = gql `query{
  posts{
    title
    author
    date
    id
    body
    image{
      url
    }
  }
}
`

OneNews = 

<View style={styles.containerStyle}>
      <View style={styles.cardSectionStyle}>
        <Text>{title}</Text>
        <Text>{author}</Text>
        <Text>{body}</Text>
      </View>
</View>

При рендеринге или переходе к этому экрану показывается каждое сообщение вместо того, которое я нажал. Как мне это настроить? Мой ожидаемый результат - просто увидеть один из постов (будучи выбранным, нажав на него) и отобразить его. Спасибо

1 Ответ

0 голосов
/ 10 ноября 2019

Я нашел способ решить эту проблему:

Сначала я передам параметр при переходе к уникальному компоненту: 

<TouchableWithoutFeedback onPress={ () => this.props.navigation.navigate('Unique', {id: post.id})}>
    <Text style={styles.titleStyle}>{post.title}</Text>
</TouchableWithoutFeedback>

После этого я просто сделаю условный рендер внутриэтот уникальный компонент: 

<ScrollView>
 <Query query={singleNews}>
    {({data, loading})=> {
       if(loading) return <Text>Loading</Text>;
        const {posts} = data;
          return posts.map(post=>
            {if(this.props.navigation.state.params.id===post.id)
              return <View>
               <OneNews key={post.id} post={post} />
              </View>}
            )}}
        </Query>
      </ScrollView>

И это все.

...