Question

我应该如何处理RN中的静态图像？假设我有一个名为let longMessage = "Super super super super super super super super super long text" let label = SKLabelNode(fontNamed: "Thonburi") label.text = longMessage label.fontSize = 24 label.fontColor = SKColor.black // set preferredMaxLayoutWidth to the width of the SKScene label.preferredMaxLayoutWidth = size.width label.lineBreakMode = .byWordWrapping label.numberOfLines = 0 addChild(label)的组件。该标志可以访问许多* .png图像文件（标志）的资产。因此，例如，您可以要求像这样的日本国旗： <Flag />

因此，大约存在193个标志。切换bettwen图片的代码如下：

<Flag type="Japan" />

和render方法如下：

import USA from '../assets/images/flags/USA.png';
import Japan from '../assets/images/flags/Japan.png';
import Slovakia from '../assets/images/flags/Slovakia.png';
...


const getSource = (type) => {
switch(type) {
  case 'Japan':
     return Japan;
case 'USA':
  return USA;

    ...

  }
}

即使存在193个标志，这种方法也可以吗？因为如果我决定使用具有不同屏幕密度的图像

return (
<Image source={getSource(type)} />
)

那么我将有193 * 3（597）个图像文件。因此，这意味着该组件的捆绑包会很大吗？存在更好的方法吗？

这些图像的最佳分辨率是什么？

Answer 1

let imagesInDisk = {
    'Peru': require('/path/to/flag/images/Peru.png'),
    'Chile': require('/path/to/flag/images/Chile.png'),
    ...
}

然后渲染：

return <Image source={imagesInDisk[countryName]} />

无需为每个图像文件使用不同的“导入”。

感谢Grund发表评论！

反应本机中的静态图像

1 个答案: