映射并放置在影像標簽中后，本機React影像不顯示-有解無憂

嗨，我有以下代碼，我目前只想列印影像并稍后設定樣式。它應該列印一張圖片，因為它在串列中遇到它們并將它們列印在其正面朝下的一側。

我已經改變了“cardImages = []”的使用方式......

const CardImages = [
  {
    image: require("../assets/images/Matching_Cards/Level_One/BLUE_CARD.png"),
  },

我意識到這不是正確的方法，但我不得不嘗試......

const CardImages = [
  {
    image: "../assets/images/Matching_Cards/Level_One/BLUE_CARD.png",
  },

這似乎沒有什么區別。我在控制臺日志中沒有看到任何錯誤，我的串列被打亂并填充了我可以從 console.log() 看到的影像。

下面是附加到我的 CardDisplay 函式的回傳方法，它應該遍歷它們并在元素中顯示它們。

return (
    <View>
      <Text style={{ textAlign: "center" }}>CARD DISPLAY: {difficulty}</Text>
      <View>
        {cards.map((card) => (
          <View key={card.id}>
            <Image
              style={GlobalStyles.faceDownCard}
              source={require("../assets/images/Matching_Cards/BACKGROUND_CARD.png")}
            />
            <Image style={GlobalStyles.faceDownCard} source={card} />
          </View>
        ))}
      </View>
    </View>
  );

下面是我的組件的完整結構

import React, { useEffect, useState } from "react";
import { Text, View, Image } from "react-native";
import { GlobalStyles } from "../Styles/GlobalStyles";

const CardImages = [
  {
    image: require("../assets/images/Matching_Cards/Level_One/BLUE_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/ORANGE_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/PINK_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/RED_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/WHITE_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/YELLOW_CARD.png"),
  },
];

// shuffle cards

const CardDisplay = ({ difficulty }) => {
  const [cards, setCards] = useState([]);

  useEffect(() => {
    shuffleCards();
  }, []);

  const shuffleCards = () => {
    const shuffleCards = [...CardImages, ...CardImages]
      .sort(() => Math.random() - 0.5)
      .map((card) => ({ ...card, id: Math.random() }));

    setCards(shuffleCards);
  };

  console.log(cards);

  return (
    <View>
      <Text style={{ textAlign: "center" }}>CARD DISPLAY: {difficulty}</Text>
      <View>
        {cards.map((card) => (
          <View key={card.id}>
            <Image
              style={GlobalStyles.faceDownCard}
              source={require("../assets/images/Matching_Cards/BACKGROUND_CARD.png")}
            />
            <Image style={GlobalStyles.faceUpCard} source={card} />
          </View>
        ))}
      </View>
    </View>
  );
};

export default CardDisplay;

感謝所有和任何幫助！:)

uj5u.com熱心網友回復：

您的影像需要height/width道具被定義。然后在樣式表中定義是不夠的（如果你是，我不確定）；您必須將它們提供給這些道具中的影像。

uj5u.com熱心網友回復：

嘗試給你的影像組件一些高度和寬度的樣式

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/477054.html

標籤：反应反应式图片反应地图-gl

上一篇：如何將兩個img并排放置以用于桌面，但只有一個用于移動

下一篇：在Julia中為影像制作框架