javascript - 自动完成/组件的动态图像

Question

我正在尝试制作一个加密 react native 应用程序，我正在尝试让图标与自动完成相匹配。因此它的工作方式与 coinmarketcap 搜索非常相似，您可以在其中输入一个硬币符号，然后您将看到相应的硬币及其图标。

我认为可能有几种方法可以做到这一点，我认为这是讨论最佳方法的好地方。

对于初学者，我创建了一个脚本，它将获取目录(SVG 或 PNG)中的所有图标，并创建一个将符号作为值的 json，键将是对图标的引用。

使用这种方法我遇到了一些问题。解决方案已在本文中介绍。

React Native - Dynamic Image Source .

然而，我一直很难找到一个好的解决方案A.将一个目录下的所有图片编码成base64编码的字符串，放入json中

B.在 React Native 端创建一个数组，其中包含 require('path-to-image')

相关代码示例在帖子中，所以我不想重复，但我想我只是想知道哪个是最佳实践。我认为将它作为一组模块来做是最好的。但我不确定是否必须动态创建类似的东西。

我创建的字典示例如下:给定一个这样的 JSON 对象，您将如何扩展它，使其变成

const image = {
key1: 'path/to/key/one.png'
key2: 'path/to/key/two.png'
 }

到

{
key1: require('path/to/key/one.png'),
key2: require('path/to/key/two.png')
}

你希望它适合像这样的 React Native 组件

            <Image
                source={ (images[symbol])}
            />

Answer 1

您有几个选项，我认为您找到了最适合您的选项(在 React Native 0.50.3 中测试):

import {Image} from 'react-native'

export default (props) => <Image source={icons[props.currency]} />

const icons = {
    bitcoin: require('../path/to/bitcoin.png'),
    ethereum: require('../path/to/ethereum.png'),
    ...
}

大声笑，这基本上就是您在问题中已经写的内容。我还通过在数组中存储一堆 require(...) 语句并按索引提取，例如:

import {Image} from 'react-native'

export default (props) => <Image source={icons[props.index]} />

const icons = [
    bitcoin: require('../path/to/bitcoin.png'),
    ethereum: require('../path/to/ethereum.png'),
    ...
]

这种方法实际上只有在您不知道用于识别目标引用的 key 时才有用(例如，如果您想随机循环浏览一堆图像)。对于所描述的用例，我会使用 key 查找。