2

我是反应原生的新手，并且对反应图像组件有一些问题。我阅读了文档并搜索了几篇关于堆栈溢出的文章和问题。我的想法是 Image 组件的 src 可以采用字符串（来自本地的路径或 url），或者我们可以使用带字符串的 require 作为周长来加载图像。我正在处理的项目有 50 多个图像，并且要渲染的图像是在运行时决定的。之前，我计划使用需要周长的变量来动态加载图像，但经过研究，我知道这是不可能的，并且 react native 没有提供此类功能的计划。

我想到了创建一个包含 require 作为值的对象。

export const subCategories = {
  'protection':[
     [
      {
        imageUrl: require('../imag`enter code here`es/trees.png'),
        title: 'Protection',
        value: 'p_1'
      },
      {
        imageUrl: require('../images/eco-tag.png'),
        title: "From Enemy",
        value: 'p_2'

      },
      {...

   'daily':[
     [
      {
        imageUrl: require('../images/trees.png'),
        title: 'Morning',
        value: 'd_1'
      },
      {
        imageUrl: require('../images/eco-tag.png'),
        title: "Evening",
        value: 'd_2'

      },
      {...

并根据传递给组件的导航周界决定选择哪个对象。

this.state = {
            data: subCategories[this.props.navigation.state.params.value]
    ...

我在这方面取得了成功。但是我担心应用程序的性能，因为我没有完整的知识，也不知道这个语句的行为如何

imageUrl: require('../images/eco-tag.png')

它将所有图像加载到内存中，并渲染分配给 Image 组件源的图像。还是会在渲染时加载图像？

<Image source={ this.props.imageUrl } style = { styles.image }  />

如果您自己向我解释这一点，请这样做。如果您有一篇好文章或错过了文档的任何部分。请把我重定向到它。

PS：我在 JS 文件中导出数据，并在重定向到屏幕时将其导入。我也很想知道这是否是正确的方法。

4

1 回答 1

0

对于渲染时间需要尝试使用一个函数：

 {
    imageUrl: () => require('../trees.png'),
    title: 'Protection',
    value: 'p_1'
  }

在组件中：

<Image source={ this.props.imageUrl() } style = { styles.image }  />
于 2021-07-29T09:07:40.723 回答