react native（expo）中如何做动态图片源？答案

【问题标题】：How to do dynamic image source in react native (expo)?react native（expo）中如何做动态图片源？
【发布时间】：2021-03-03 07:38:02
【问题描述】：

我有一个简单的功能可以在我的 react native (expo) 项目中显示一张扑克牌。它在本地测试时有效，但在为设备（APK 等）构建时无效。据我了解，这是因为require 中的字符串不能是动态的。如果是这种情况，处理此问题的最佳方法是什么？
我是否必须对所有 52 张卡进行要求，然后为该卡的来源选择适当的变量？还是有更好的方法？

  export default function Card( { cardID, index, onCardClick }) {

  const rankIndex = cardID % 13;
  const rank = RANKS[rankIndex];
  const suitIndex = cardID / 13 | 0;
  const suit = SUIT[suitIndex];

  let cardImage = require('../../assets/game/cards/'+rank+suit+'.png');

  return (
    <TouchableOpacity style={[index && index != 0 && styles.cardMargin]} onPress={() => onCardClick(cardID)}>
        <Image style={styles.card} source={cardImage} />
    </TouchableOpacity>
  );
}

谢谢

【问题讨论】：

标签： react-native expo

【解决方案1】：

做这样的事情：

const cardImages = {
  AceSpades: require('../../assets/game/cards/acespaces.png'),
  AceClubs: require('../../assets/game/cards/aceclubs.png'),
  // etc..
};

您可以通过编写一个小节点脚本或手动创建它从您的文件系统生成这个数组。

metro bundler 要求导入是静态的。

【讨论】：

好的，所以确实需要为每个卡片图像生成一个变量。我希望有一个更优雅的解决方案，但如果是这样，那就是这样。我会试试的，谢谢你

【解决方案2】：

您应该创建一个函数，将所有图像作为数组返回，然后选择您想要的特定图像的索引。

【讨论】：

谢谢，这也应该可以。我只是采用了第一个解决方案，将它们全部放在同一个文件中的一个数组变量中。不过还是谢谢