如何在使用React Native和Apollo构建的应用程序中从我的帖子列表中呈现单个帖子？

Question

因此，我正在尝试构建类似于博客的应用。而且我不确定如何呈现已选择阅读的单个帖子。

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

^这是使我导航到我单击的帖子的事件（不确定如何传递其道具或ID）

这是我重定向到的组件：

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>

当我渲染或导航到该屏幕时，将显示每个帖子，而不是我所点击的帖子。我该如何设置？我的预期输出是只看到其中一个帖子（通过轻击即可选中该帖子）并进行渲染。谢谢

Answer 1

我找到了解决此问题的方法：

首先，我将在导航到唯一组件时传递参数：

<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>

就是这样。