Javascript React Native-映像需要使用动态名称的模块

我目前正在使用React Native构建一个测试应用程序。到目前为止，图像模块工作正常

例如，如果我有一张名为avatar的图像，下面的代码片段就可以了

<Image source={require('image!avatar')} />

但是如果我把它改成动态字符串，我得到

<Image source={require('image!' + 'avatar')} />

我得到一个错误：

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager. 需要未知模块“图像！化身”。如果您确定模块在那里，请尝试重新启动打包机。 显然，这是一个人为的例子，但动态图像名称很重要。React Native不支持动态图像名称吗

---

你应该使用一个对象

例如，假设我向一个API发出了一个AJAX请求，它返回一个图像链接，我将其保存为

imageLink

：

---

source={{uri:this.state.imageLink}

这在文档的“”部分中介绍：

引用捆绑包中的映像的唯一允许方法是在源代码中逐字写入require（'image！资产名称'）

//很好
//坏的
var icon=this.props.active？““我的图标处于活动状态”：“我的图标处于非活动状态”；
//好
var icon=this.props.active？require（'image！我的图标处于活动状态'）：require（'image！我的图标处于非活动状态'）；

不过，您还需要记住在Xcode中将图像添加到应用程序的xcassets包中，尽管从您的评论来看，您已经这样做了

您可以使用

<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />

显示图像

发件人：

这对我很有效：

我制作了一个自定义图像组件，它接受一个布尔值来检查图像是来自web还是来自本地文件夹

// In index.ios.js after importing the component
<CustomImage fromWeb={false} imageName={require('./images/logo.png')}/>

// In CustomImage.js which is my image component
<Image style={styles.image} source={this.props.imageName} />

---

我只是将整个

require（'./images/logo.png'）

作为道具发送有效如果您有已知的图像（URL），则与此相关：

我解决这个问题的方法是：

我使用存储图像和图像名称的对象创建了一个文件：

const images = {
  dog: {
    imgName: 'Dog', 
    uri: require('path/to/local/image')
  },
  cat: {
    imgName: 'Cat on a Boat', 
    uri: require('path/to/local/image')
  }
}

export { images };

然后，我将对象导入到我想要使用它的组件中，然后像这样执行条件渲染：

import { images } from 'relative/path';

if (cond === 'cat') {
  let imgSource = images.cat.uri;
}

<Image source={imgSource} />

从'relative/path'导入{images}；
如果（条件=='cat'）{
让imgSource=images.cat.uri；
}

我知道这不是最有效的方法，但它肯定是一个解决办法

---

希望有帮助

我知道这是一个古老的问题，但我将在这里添加它，因为我在寻找解决方案时发现了这个问题。文档允许uri:“网络映像”

对我来说，我得到的图像与此动态工作

<Image source={{uri: image}} />

---

如果您正在寻找一种方法来创建一个列表，例如通过图像和描述的JSON数组进行循环，这将适合您

创建一个文件（保存我们的JSON数据库），例如ProfilesDB.js：

const配置文件=[
{
id:'1'，
姓名：'彼得·帕克'，
src:require（'../images/user1.png'），
年龄：'70'，
},
{
id:'2'，
姓名：“巴拉克·奥巴马”，
src:require（'../images/user2.png'），
年龄：'19'，
},
{
id:'3'，
姓名：“希拉里·克林顿”，
src:require（'../images/user3.png'），
年龄:"50",，
},
];
导出默认配置文件


在我的例子中，我尝试了很多，但最终还是成功了
样式中的图像输入如果您仍然不明白，请让我知道此处的重要部分：

我们无法在require中指定图像名称，例如[require（'item'+vairable+'.png'）]

步骤1：我们使用以下图像属性集合创建一个ImageCollection.js文件

步骤2：在应用程序中导入图像并根据需要进行操作

类ListRepoApp扩展组件{
renderItem=（{item}）=>(
项目编号：{Item}
);
渲染（）{
常量数据=[“1”、“2”、“3”、“4”、“5”]
返回(
)
}
}
导出默认ListRepoApp；

如果你想要一个详细的解释，你可以点击下面的链接
拜访

提供：
从“React”导入React，{Component}；
从“react native”导入{Image}；
类图像扩展组件{
建造师（道具）{
超级（道具）；
此.state={
图像：{
“./assets/RetailerLogo/1.jpg”：require（“../../../assets/RetailerLogo/1.jpg”），
“./assets/RetailerLogo/2.jpg”：require（“../../../assets/RetailerLogo/2.jpg”），
“./assets/RetailerLogo/3.jpg”：要求（“../../../assets/RetailerLogo/3.jpg”）
}
}
}
render（）{
const{images}=this.state
返回(
)}
}

同样，在编译包之前，需要加载所有图像源

所以，使用动态图像的另一种方法是使用switch语句。假设你想为不同的角色显示不同的化身，你可以这样做：

类应用程序扩展组件{
状态={avatar:}
获取avatarImage（）{
开关（this.state.avatar）{
“蜘蛛侠”一案：
返回要求（'./spiderman.png'）；
“蝙蝠侠”案：
返回要求（'./batman.png'）；
“绿巨人”案：
返回要求（'./hulk.png'）；
违约：
返回require（'./no image.png'）；
}
}
render（）{
返回
}
}

检查快餐：


另外，请记住，如果您的图像处于联机状态，并且没有任何问题，您可以执行以下操作：

let superhero=“蜘蛛侠”；
首先，创建一个需要映像的文件-必须以这种方式加载React本机映像

资产/索引.js

export const friendsandfoe = require('./friends-and-foe.png'); 
export const lifeanddeath = require('./life-and-death.png'); 
export const homeandgarden = require('./home-and-garden.png');

现在导入所有资产

App.js

import * as All  from '../../assets';

现在可以将图像用作插值，其中imageValue（来自后端）与命名的本地文件相同，即：“homeandgarden”：

<Image style={styles.image} source={All[`${imageValue}`]}></Image>

假设您的应用程序功能与我的类似。你的应用程序在哪里
ImageCollection.js
================================
export default images={
    "1": require("./item1.png"),
    "2": require("./item2.png"),
    "3": require("./item3.png"),
    "4": require("./item4.png"),
    "5": require("./item5.png")
}

class ListRepoApp extends Component {

    renderItem = ({item }) => (
        <View style={styles.item}>
            <Text>Item number :{item}</Text>
            <Image source={Images[item]}/>
        </View>
    );

    render () {
        const data = ["1","2","3","4","5"]
        return (
            <FlatList data={data} renderItem={this.renderItem}/>
        )
    }
}

export default ListRepoApp;

import React, { Component } from 'react';
import { Image } from 'react-native';

class Images extends Component {
  constructor(props) {
    super(props);
    this.state = {
           images: {
                './assets/RetailerLogo/1.jpg': require('../../../assets/RetailerLogo/1.jpg'),
                './assets/RetailerLogo/2.jpg': require('../../../assets/RetailerLogo/2.jpg'),
                './assets/RetailerLogo/3.jpg': require('../../../assets/RetailerLogo/3.jpg')
            }
    }
  }

  render() {
    const {  images } = this.state 
    return (
      <View>
        <Image
                            resizeMode="contain"
                            source={ images['assets/RetailerLogo/1.jpg'] }
                            style={styles.itemImg}
                        />
     </View>
  )}
}

export const friendsandfoe = require('./friends-and-foe.png'); 
export const lifeanddeath = require('./life-and-death.png'); 
export const homeandgarden = require('./home-and-garden.png');

import * as All  from '../../assets';

<Image style={styles.image} source={All[`${imageValue}`]}></Image>

import React from 'react';
import { Image, Dimensions } from 'react-native';
import Images from './Index';
const ImageView = ({ index }) => {
    return (
        <Image
            source={Images['image' + index]}
        />
    )
}
export default ImageView;

this.state={
       //defualt image
       newimage: require('../../../src/assets/group/kids_room3.png'),
       randomImages=[
         {
            image:require('../../../src/assets/group/kids_room1.png')
          },
         {
            image:require('../../../src/assets/group/kids_room2.png')
          }
        ,
         {
            image:require('../../../src/assets/group/kids_room3.png')
          }
        
        
        ]

}

let setImage=>(){
//set new dynamic image 
this.setState({newimage:this.state.randomImages[Math.floor(Math.random() * 3)];
})
}

<Image
        style={{  width: 30, height: 30 ,zIndex: 500 }}
        
        source={this.state.newimage}
      />

const image = condition ? require("../img/image1.png") : require('../img/image2.png');

<Image source={image} />