React Native 有条件地渲染 FlatList 项目的一部分

Question

所以我在平面列表中显示 posts。他们渲染得很好，他们的文本渲染，用户名等。但我在每个 post 中也有情绪。我也想渲染它。我可以，每个 post 都有 1、2、3、4 或 5 保存在 Firebase 中，我也可以显示它。但是我想做的是，如果集合 posts 中文档的字段值心情是 3，我想呈现某个图标；如果心情是其他值，我想呈现一个不同的图标。到目前为止我尝试了什么：

renderIcon = async () => {
    const yolo = [];
    const snapshot = await firebase
      .firestore()
      .collection("posts")
      .get()
      .then((snapshot) => {
        snapshot.docs.forEach((doc) => {
          const { mood } = doc.data();
          yolo.push({ mood: mood });
          let result = yolo.map((a) => a.mood);
          this.setState({ mood: result });
          console.log(this.state.mood);  //this stores different moods extracted from an array of objects
          for (let i = 0; i < result.length; i++) {
            if (result[i] == 3) {
              return <MaterialCommunityIcons
                  name="emoticon-neutral"
                  size={40}
                  color="yellow"
                />;
            }
          }
        });
      });
  };

在这个函数的底部，我调用了 renderIcon 并使用 pther 部分来渲染 flatlist

renderPost = (post, mood, props) => {
   
    return (
      <View>
        <View
          style={{
            backgroundColor: "#FFF",
            //borderRadius: 18,
            //borderTopWidth: 1,
            borderTopLeftRadius: 18,
            borderTopRightRadius: 18,
            borderBottomRightRadius: 18,
            //borderTopRightRadius: 18,
            //flexDirection: "row",
            //alignSelf: "flex-start",
            margin: 8,
            marginVertical: 6,
            overflow: "hidden",
            borderWidth: 4,
            borderColor: "#63003d",
            //padding: 8,
          }}
        >
          <View style={{ flexDirection: "row" }}>
            <View style={{ flex: 3.5 }}>
              <View
                style={{
                  padding: 8,
                  flexDirection: "row",
                  //justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <Image
                  source={
                    post.avatar
                      ? { uri: post.avatar }
                      : require("../assets/tempAvatar.jpg")
                  }
                  style={styles.avatar}
                />              
              <Text style={styles.post}>{post.text}</Text>
              {/* <Image
            source={post.image && { uri: post.image }}
            source={post.image}
            style={styles.postImage}
            resizeMode="cover"
          /> */}
              <View
                adjustsFontSizeToFit={true}
                style={{
                  textAlignVertical: "center",
                  textAlign: "center",
                  alignItems: "center",
                  justifyContent: "center",

                  //overflow: "hidden",
                }}
              >    
             //HERE I CALL THE FUNCTION!!!!!!!!!!!!!!!!!!!!!
                {this.renderElement()}
              </View>
            </View>
      </View>
    );
  };

在这个函数 renderPost 中，我很容易调用 post 的不同部分。我也可以为了心情而这样做。但是，如果我这样做 post.mood 它不起作用，我的意思是它起作用，但我需要进行条件渲染。如果心情==3 我想要显示一个图标而不是 3 个。有什么帮助吗？

Answer 1

如果情绪类型固定，您可以尝试一些条件来检查图像。我根据心情添加了一些代码。您可以根据您的要求修改它。这里是Code link

Answer 2

我通过使用多个三元运算让它工作。这就是所有需要的，在 flatlist 或任何地方都不需要更改。简单地说，你从你的 firebase 或任何变量中调用某些东西，所以可以说 post.mood ，你可以这样做：

<Text>
                  {post.mood == 3 ? (
                    <MaterialCommunityIcons
                      name="emoticon-neutral"
                      size={40}
                      color="yellow"
                    />
                  ) : post.mood == 1 ? (
                    <MaterialCommunityIcons
                      name="emoticon-excited"
                      size={40}
                      color="green"
                      onPress={() => this.setState({ mood: 1 })}
                    />
                  ) : post.mood == 2 ? (
                    <MaterialCommunityIcons
                      name="emoticon-happy"
                      size={40}
                      color="#90EE90"
                      onPress={() => this.setState({ mood: 2 })}
                    />
                  ) : post.mood == 4 ? (
                    <MaterialCommunityIcons
                      name="emoticon-sad"
                      size={40}
                      color="orange"
                      onPress={() => this.setState({ mood: 4 })}
                    />
                  ) : (
                    <MaterialCommunityIcons
                      name="emoticon-cry"
                      size={40}
                      color="red"
                      onPress={() => this.setState({ mood: 5 })}
                    />
                  )}
                </Text>

React Native 有条件地渲染 FlatList 项目的一部分

React Native Conditionally Render Part Of Item Of FlatList

react-native

react-native-flatlist

react-native-firebase