>source

그래서 나는 플랫리스트 안에 게시물을 표시합니다. 그들은 잘 렌더링되고, 텍스트는 렌더링되고, 사용자 이름 등이 표시됩니다. 그러나 각 게시물에서 내가 가진 것은 기분입니다. 그것도 렌더링하고 싶습니다. 그리고 각 게시물에는 Firebase에 1, 2, 3, 4 또는 5가 저장되어 있고 표시 할 수도 있습니다. 하지만 제가하고 싶은 것은 컬렉션 포스트 내부 문서의 필드 값 분위기가 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을 호출하고 flatlist를 렌더링하기 위해 pther 부분을 사용합니다.

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를 수행하면 작동하지 않는다는 것은 작동하지만 조건부 렌더링을 수행해야 함을 의미합니다. mood == 3이면 3 대신 하나의 아이콘을 표시하고 싶습니다. 도움이 필요하십니까?

  • 답변 # 1

    무드 유형이 고정 된 경우 이미지를 확인하기 위해 몇 가지 조건을 시도 할 수 있습니다. 기분에 따라 코드를 추가했습니다. 요구 사항에 따라 수정할 수 있습니다. 다음은 코드 링크입니다.

  • 답변 # 2

    여러 삼항 연산을 사용하여 작동하도록했습니다. 이것이 필요한 전부이며 플랫리스트 내부 또는 어디에서나 변경할 필요가 없습니다. 단순히 당신이 당신의 firebase 또는 변수에서 무언가를 호출하는 곳에서 post.mood, u cna라고 말하십시오.

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

관련 자료

  • 이전 dataframe - R에서 다른 열의 가중치를 기반으로 열의 크기를 조정하는 방법은 무엇입니까?
  • 다음 postgresql - SQL 조인과 3 개의 테이블?