React Native如何渲染评论

如何解决React Native如何渲染评论

所以我在从Firebase获得的数组中有注释。我在HomeScreen文件夹中的状态下有评论，当我在任何帖子下按评论图标时，都会在控制台中收到该特定帖子的评论。我希望当我按下该图标时，该图标被带到另一个屏幕，该屏幕上将列出这些特定帖子。您可以在我的图像中看到很多东西，但也请尝试复制相关代码。谢谢所有尝试帮助我的人！请主要看postComment方法。按下帖子中的评论图标，即可获取该帖子的ID。

<div class="container-fluid">
    <div class='row'>
        <video autoplay muted loop class="vid">
            <source src="asdf.mp4" type="video/mp4">
        </video>
    </div>
</div>

这是注释：

            export default class HomeScreen extends React.PureComponent {
          constructor(props) {
            super(props);
          }
          state = {
            loading: false,limit: 2,post: [],comments: [],};
        
          //unsubscribe = null;
        
          handleExpand = () => {
            this.setState({ expand: !this.state.expand });
          };
        
          onPostsReceived = (post) => {
            try {
              this.setState({ post: post });
            } catch (error) {
              console.log(error);
              Alert.alert(
                "Posts failed to load,you need to check your internet connection."
              );
            }
          };
        
          postComment = async (id) => {
            var comments = [];
            firebase
              .firestore()
              .collection("comments")
              .where("postId","==",id)
              .get()
              .then((snapshot) => {
                snapshot.forEach((doc) => comments.push(doc.data()));
                this.setState({ comments: comments });
                <Comments comments={this.state.comments} />;
                console.log(this.state.comments);
              });
            this.props.navigation.navigate("Comments");
          };
        
          async componentDidMount() {
            getPosts(this.onPostsReceived);
            var screamData = {};
            const db = Fire.shared.firestore;
            const ref = await db.collection("posts").get();
            //console.log(ref.docs);
            for (let i = 0; i < ref.size; i++) {
              var postId = ref.docs[i].id;
              //console.log(postId);
            }
        
            //HandleIdsPosts();
            const yo = Fire.shared.firestore
              .collection("comments")
              // Filter results
              .where("postId",postId)
              .get()
              .then((querySnapshot) => {
                if (querySnapshot.exists) {
                  //console.log(yo);
                }
              });
          }
        
          componentWillUnmount() {
            //this.unsubscribe();
          }
        
          renderPost = (post) => {
            return (
              <View style={styles.feedItem}>
                <Image
                  source={
                    //this.state.user.avatar
                    // ? { uri: this.state.user.avatar }
                    // :
                    require("../assets/tempAvatar.jpg")
                  }
                  style={styles.avatar}
                />
                <View style={{ flex: 1 }}>
                  <View
                    style={{
                      flexDirection: "row",justifyContent: "space-between",alignItems: "center",}}
                  >
                    <View>
                      {/* <Text>{console.log(this.state.post)}</Text> */}
                      <Text style={styles.name}>{}</Text>
                      <Text style={styles.timestamp}>
                        {moment(post.timestamp).toDate().toDateString()}
                      </Text>
                    </View>
        
                    <Ionicons name="ios-more" size={24} color="#73788B" />
                  </View>
                  <Text style={styles.post}>{post.text}</Text>
                  <Image
                    source={post.image && { uri: post.image }}
                    style={styles.postImage}
                    resizeMode="cover"
                  />
                  <View style={{ flexDirection: "row" }}>
                    <Ionicons
                      name="ios-heart-empty"
                      size={24}
                      color="#73788B"
                      style={{ marginRight: 16 }}
                      //onPress={() => this.xDD(this.state.comments)}
                      //onPress={() => navigation.navigate("CommentsScreen")}
                      //onPress={() => this.props.navigation.navigate("Comments")}
                      onPress={() =>
                        this.props.navigation.navigate("Comments",{
                          data: this.state.comments,})
                      }
                    />
                    <Ionicons
                      name="ios-chatboxes"
                      size={24}
                      color="#73788B"
                      onPress={() => this.postComment(post.id)}
                    />
                  </View>
                </View>
              </View>
            );
          };
        
          renderComments = (comments) => {
            <View>
              <FlatList
                data={this.state.comments}
                renderItem={({ item }) => (
                  <View>
                    <Text> {item.body} </Text>
                  </View>
                )}
                keyExtractor={(item,index) => item.id}
              />
            </View>;
          };
        
          xDD = () => {
            return (
              <View>
                <Test></Test>
              </View>
            );
          };
        
          render() {
            return (
              <View style={styles.container}>
                {/* <Loader loading={this.state.loading} /> */}
                <StatusBar
                  translucent
                  backgroundColor="white"
                  barStyle="dark-content"
                />
                <ClassicHeader
                  headerTitle="Eleph"
                  leftComponent={
                    <TouchableOpacity
                      style={{ marginRight: 0,margin: 10 }}
                      onPress={() =>
                        this.props.navigation.dispatch(DrawerActions.openDrawer())
                      }
                    >
                      <FontAwesome5 name="bars" size={24} color="#161924" />
                    </TouchableOpacity>
                  }
                  rightComponent={
                    <TouchableOpacity
                      style={{ marginLeft: 0,margin: 10 }}
                      onPress={() => this.props.navigation.navigate("Message")}
                    >
                      <Ionicons name="ios-chatboxes" size={24} color="#73788B" />
                    </TouchableOpacity>
                  }
                />
                <FlatList
                  style={styles.feed}
                  data={this.state.post}
                  renderItem={({ item }) => this.renderPost(item)}
                  ListFooterComponent={this.renderFooter}
                  ListHeaderComponent={this.renderHeader}
                  onEndReachedThreshold={0}
                  onEndReached={this.retrieveMore}
                  showsVerticalScrollIndicator={false}
                ></FlatList>
              </View>
            );
          }
        }