映射并放置在图像标签中后，本机 React 图像不显示

Question

您好，我有以下代码，我目前只想打印出图像并稍后设置样式。它应该打印一张图片，因为它在列表中遇到它们并将它们打印在正面朝下的一面。

我已经改变了 '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().

中看到的图像

下面是我的 return 方法附加到我的 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;

感谢所有帮助！ :)

Answer 1

您的图像需要 height / width 属性才能定义。在 StyleSheet 中定义然后是不够的（如果你是，我不确定）；你必须把它们交给那些道具中的图像。

Answer 2

尝试为您的图像组件提供一些高度和宽度样式

映射并放置在图像标签中后，本机 React 图像不显示

Native React Images not displaying after mapping over and being placed in image tag

image

reactjs

react-native

react-map-gl