React Native-使用动态名称的图像需求模块


84

我目前正在使用React Native构建一个测试应用程序。到目前为止,图像模块一直运行良好。

例如,如果我有一个名为的图像avatar,则以下代码段可以正常工作。

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

但是但是如果我将其更改为动态字符串,则会得到

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

我得到错误:

需要未知模块“ image!avatar”。如果您确定模块在那里,请尝试重新启动打包程序。

显然,这是一个人为的示例,但是动态图像名称很重要。React Native是否不支持动态图像名称?

使用动态图像名称来响应本机错误


1
我遇到过类似的问题与Vue公司,答案就在这里stackoverflow.com/questions/40491506/...
Alonad

Answers:


70

文档在“静态资源”部分下对此进行了介绍:

引用捆绑中的图像的唯一允许方式是在源代码中按字面意义编写require('image!name-of-the-asset')。

// GOOD
<Image source={require('image!my-icon')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

但是,您还需要记住将图像添加到使用Xcode的应用程序中的xcassets捆绑包中,尽管从您的评论看来,您已经这样做了。

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets


1
我应该在哪里添加图像,我在drawable文件夹中使用android的react native?
coderzzz18 2016年

2
上面的链接不正确,该文章现在位于facebook.github.io/react-native/docs/images.html
app_sciences

45
嗨,如果我有数百张图像需要怎么办?
chanjianyi

1
@chanjianyi我在同样的情况:-(
密苏里州

1
对我来说,“ Require”在IOS设备上不起作用。有什么想法吗?
亚瑟·梅德罗斯

57

这为我工作:

我制作了一个自定义图像组件,该组件接受一个布尔值,以检查图像是来自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} />

如果看到代码,请使用以下代码之一:

// NOTE: Neither of these will work
source={require('../images/'+imageName)} 
var imageName = require('../images/'+imageName)

我只是将整个发送require('./images/logo.png')为道具。有用!


5
这个答案值得更多的赞赏。当您声明require语句并作为道具传递时,它绝对有效。非常感谢您的简单解释,我只希望其他人也能这么清楚。
dazziola

1
道具工作奇迹。这应该在官方文档中说明。
dasmikko

1
class CustomImage extends Component { constructor(props) { super(props); } render() { return ( <Image source={this.props.imageName} resizeMode="contain" style={{ height: 24, width: 24 }} /> ); } } <CustomImage fromWeb={false} imageName={require(`../../images/phone-${item.status}.png`)} />
Pablo

1
在父Component我已经 <CustomImage fromWeb={false} imageName={require(../../assets/icons/${el.img}.png)} /> 的子组件和本class CustomImage extends Component { constructor(props) { super(props); } render() { return ( <Image source={this.props.imageName} resizeMode="contain" style={{ height: 24, width: 24 }} /> ); } }
瓦尔特Monecke

2
纯属天才,这正是我所寻找的:)
Sumit Sahoo

52

如果您知道图像(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} />

我知道这不是最有效的方法,但绝对是一种解决方法。

希望能帮助到你!


3
处理已知图像的整洁解决方案
Tedy Kanjirathinkal

1
@TedyKanjirathinkal我很高兴它有所帮助!
Walter Monecke '17

1
谢谢,这将很有用
Truca

@WalterMonecke:如果我们这样做,将获得整数值
sabir

24

例如,如果您正在寻找一种通过遍历图像和描述的JSON数组来创建列表的方法,则此方法将为您工作。

  1. 创建一个文件(以保存我们的JSON数据库),例如ProfilesDB.js:

const Profiles=[
	  {
	  "id" : "1",
	  "name" : "Peter Parker",
	  "src" : require('../images/user1.png'),
	  "age":"70",
	},
	{
	"id" : "2",
	"name" : "Barack Obama",
	"src" : require('../images/user2.png'),
	"age":"19",
	},
	{
	"id" : "3",
	"name" : "Hilary Clinton",
	"src" : require('../images/user3.png'),
	"age":"50",
	}
]
export default Profiles;

  1. 然后将数据导入我们的组件中,并使用FlatList在列表中循环:

import Profiles from './ProfilesDB.js';

<FlatList
  data={Profiles}
  keyExtractor={(item, index) => item.id}
  renderItem={({item}) => (
    <View>
      <Image source={item.src} />
      <Text>{item.name}</Text>
    </View>
  )}
/>

祝好运!


3
谢谢,这让我无比沮丧!
cherucole

11

正如React Native Documentation所说的那样,在编译包之前,需要先加载所有图像源。

因此,使用动态图像的另一种方法是使用switch语句。假设您要为其他角色显示不同的头像,可以执行以下操作:

class App extends Component {
  state = { avatar: "" }

  get avatarImage() {
    switch (this.state.avatar) {
      case "spiderman":
        return require('./spiderman.png');
      case "batman":
        return require('./batman.png');
      case "hulk":
        return require('./hulk.png');
      default:
        return require('./no-image.png');
    }
  }

  render() {
    return <Image source={this.avatarImage} />
  }
}

检查小吃:https : //snack.expo.io/@abranhe/dynamic-images

另外,请记住,如果图像在线,则没有任何问题,您可以执行以下操作:

let superhero = "spiderman";

<Image source={{ uri: `https://some-website.online/${superhero}.png` }} />

7

首先,创建一个需要映像的文件-必须以这种方式加载React本机映像。

资产/index.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>

不错的解决方案,对我有很大帮助!Tks。
Fryla-克里斯蒂安·马鲁奇

别担心!在这里找不到合适的解决方案,于是想出了我自己的解决方案:)很高兴能提供帮助。
汉娜·卡尼

5

这里的重要部分: 我们无法在require之内合并图像名称,例如[require('item'+ vairable +'。png')]

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

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")
}

第2步:在您的应用中导入图片并根据需要进行操作

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;

如果您想要详细的解释,可以点击下面的链接。 https://www.thelearninguy.com/react-native-require-image-using-dynamic-names

礼貌:https//www.thelearninguy.com


5
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>
  )}
}


2

要使用动态图像

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')
          }
        
        
        ]

}

当按下按钮时-(我选择0-2之间的图像随机数)

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}
      />


1
 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput> 

<Image
            source={this.props.imgUri}
            style={{
              height: 30,
              width: 30,
              resizeMode: 'contain',
            }}
          />   

在我的情况下,我尝试了很多,但最终它 仍然可以在StyledInput内运行StyledInput组件名称图像(如果您仍然不明白的话,请告诉我)


1

假设您的应用程序具有与我的应用程序相似的功能。您的应用通常离线的地方,并且您想要一个接一个地渲染图像。然后下面是在React Native版本0.60中对我有用的方法。

  1. 首先创建一个名为Resources / Images的文件夹,然后将所有图像放在此处。
  2. 现在创建一个名为Index.js的文件(位于Resources / Images),该文件负责索引Reources / Images文件夹中的所有图像。

const Images = {'image1':require('./ 1.png'),'image2':require('./ 2.png'),'image3':require('./ 3.png')}}

  1. 现在,在您选择的文件夹中创建一个名为ImageView的组件。可以创建功能,类或常量组件。我已经使用了Const组件。该文件负责根据索引返回图像。
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;
  1. 现在,从要动态渲染静态图像的组件中,只需使用ImageView组件并传递索引即可。

    <ImageView index = {this.qno + 1} />


-2

您应该为此使用一个对象。

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

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


3
对于动态图像路径链接,此操作无效: var img = "../img/icons/"+img_name+"_selected.png"; <br/> <Image source={{uri: img}} resizeMode={'contain'} />
罗伯特·托马斯四世

3
为此,如果您知道所有img_name变体都将以这种方式破解:var images = { 'first': require('../first.png'), 'second': require('../second.png') } <Image source={{uri:images[img_name]}} resizeMode={'contain'} />
Gabriel Lupu

2
请注意,对于@GabrielLupu的建议:您正在通过这种方式分配内存中的所有图像。这取决于图像的数量及其大小,但是您可能会遇到内存不足的错误。
Lashae
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.