react-native - 如何在 React Native (expo) 中做动态图像源？

Question

我有一个简单的功能可以在我的 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>
  );
}

谢谢

Answer 1

做这样的事情:

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

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

metro bundler 要求导入是静态的。