Question

我正在尝试对本机应用程序进行加密反应，我正在尝试使用与自动填充相匹配的图标。因此它与coinmarketcap搜索非常相似，您可以在其中键入硬币符号，您将看到相应的硬币及其图标。

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

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

使用这种方法我遇到了一些问题。这篇文章已经介绍了解决方案。

React Native - Dynamic Image Source

然而，我很难找到一个好的解决方案 A.将目录中的所有图像编码为base64encoded字符串并将其放入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')
}

你是否适合像这样的反应原生组件

            <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'),
    ...
]

这种方法只有在您不知道识别目标引用的关键时才会有用（例如，如果您想要随机循环遍历一堆图像）。对于所描述的用例，我将使用密钥查找。

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

1 个答案: