Javascript 如何将扑克牌值链接到React Native中的图像？

我已经可以输出卡值，我在资产中有52张卡图像。如何将每张卡的值组合到对应的图像中

例如，如果我从卡片组中随机输出一张卡片，它将向它显示相应的图像

这是卡片组类：

export default class cardDeck extends React.Component{
constructor(){
super();
this.deck = [];
this.reset();
this.shuffle();
}

reset(){

this.deck = [];

const suits = ['Hearts', 'Spades', 'Clubs', 'Diamonds'];
const values = ['Ace', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'Jack', 'Queen', 'King'];

for (let suit in suits) {
for (let value in values) {
  this.deck.push(`${values[value]} of ${suits[suit]}`);
}
}
}

shuffle(){
const { deck } = this;
let m = deck.length, i;

while(m){
i = Math.floor(Math.random() * m--);

[deck[m], deck[i]] = [deck[i], deck[m]];
}

return this;
}
}

---

在游戏类中，我只需调用shuffle函数，然后随机渲染阵列中的一张卡，我希望它显示卡对应的图像，而不仅仅是文本。

好的，所以您可以采取的一种方法是将卡图像命名为

aceofhearts.jpg、2ofhearts.jpg、3ofspades.jpg

等

然后在代码中，无论在哪里显示图像，都可以执行类似的操作

//remove spaces - could do this in a loop to get all the cards
let card = deck[0].split(' ').join('')

//make sure to set this to your image path
let imagePath = `../assets/images/${card}.jpg`

//JSX
<Image source={require(imagePath)} />

//删除空格-可以在循环中执行此操作以获取所有卡
让卡=牌组[0]。拆分（“”）。合并（“”）
//确保将其设置为图像路径
让imagePath=`../assets/images/${card}.jpg`
//JSX

好的，那么您可以采取的一种方法是给卡片图像命名，如

aceofhearts.jpg、2ofhearts.jpg、3ofspades.jpg

等

然后在代码中，无论在哪里显示图像，都可以执行类似的操作

//remove spaces - could do this in a loop to get all the cards
let card = deck[0].split(' ').join('')

//make sure to set this to your image path
let imagePath = `../assets/images/${card}.jpg`

//JSX
<Image source={require(imagePath)} />

//删除空格-可以在循环中执行此操作以获取所有卡
让卡=牌组[0]。拆分（“”）。合并（“”）
//确保将其设置为图像路径
让imagePath=`../assets/images/${card}.jpg`
//JSX

这不起作用，错误是：第19行的调用无效：require（imagePath）。如果我把卡片定义为“红心杰克”，它就行了，但那没用。我还检查了，仅通过打印deck[0]它就输出了与图像名称相对应的字符串。@MikkoKettunen，您是否将路径

。/assets/images/${card}.jpg

更新为资产文件夹的实际路径？此外，图像文件的名称应类似于2ofhearts.jpg，因此，当您使用card=deck[0].split（“”）.join（“”）时，您还将获得类似于2ofhearts@MikkoKettunen你说“如果我定义卡片=‘jack of hearts’”，那就行了，所以我想知道你的文件名中是否也有空格？我想如果他们删除

.split（“”）.join（“”）就可以了，然后您将得到带有空格的名称。这不起作用，错误是：第19行的调用无效：require（imagePath）。如果我把卡片定义为“红心杰克”，它就行了，但那没用。我还检查了，仅通过打印deck[0]它就输出了与图像名称相对应的字符串。@MikkoKettunen，您是否将路径
。/assets/images/${card}.jpg
更新为资产文件夹的实际路径？此外，图像文件的名称应类似于2ofhearts.jpg，因此，当您使用card=deck[0].split（“”）.join（“”）时，您还将获得类似于2ofhearts@MikkoKettunen你说“如果我定义卡片=‘jack of hearts’”，那就行了，所以我想知道你的文件名中是否也有空格？我想如果他们删除
.split（“”）.join（“”）
就可以得到带有空格的名称。