React Native - модуль требований к изображению с использованием динамических имен

87

В настоящее время я создаю тестовое приложение с использованием React Native. Модуль изображения пока работает нормально.

Например, если у меня есть изображение с именем avatar, приведенный ниже фрагмент кода работает нормально.

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

Но если я изменю его на динамическую строку, я получу

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

Я получаю сообщение об ошибке:

Требуется неизвестный модуль «изображение! Аватар». Если вы уверены, что модуль есть, попробуйте перезапустить упаковщик.

Очевидно, это надуманный пример, но имена динамических изображений важны. React Native не поддерживает имена динамических изображений?

Реагировать на собственную ошибку с именем динамического изображения

Шахин Гиасси
источник
1
Я столкнулся с аналогичной проблемой с Vue, ответ здесь stackoverflow.com/questions/40491506/…
Алонад 01

Ответы:

73

Это описано в документации в разделе « Статические ресурсы »:

Единственный допустимый способ сослаться на изображение в пакете - это буквально написать 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} />

Однако вам также нужно не забыть добавить свои изображения в пакет xcassets в вашем приложении в Xcode, хотя из вашего комментария кажется, что вы уже это сделали.

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

Колин Рамзи
источник
1
Куда мне добавлять изображения, я использую react native для android, в папке с возможностью рисования?
coderzzz18
2
Ссылка выше неверна, статья теперь находится на facebook.github.io/react-native/docs/images.html
app_sciences
51
привет, как это сделать, если мне нужны сотни изображений?
chanjianyi
1
@chanjianyi Я в такой же ситуации :-(
Пн
1
«Требовать» у меня не работает на устройствах iOS. Любая идея, почему?
Артур Медейрос
59

Это сработало для меня:

Я создал настраиваемый компонент изображения, который принимает логическое значение, чтобы проверить, находится ли изображение из Интернета или передается из локальной папки.

// 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')как опору. Оно работает!

BK7
источник
5
Этот ответ заслуживает большего доверия. Это абсолютно работает, когда вы объявляете оператор require и передаете его как опору. Большое спасибо за ваше простое объяснение, я только хочу, чтобы другие были такими же ясными.
дацциола
1
Реквизит творит чудеса. Это должно быть указано в официальных документах.
дасмикко
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`)} />
Пабло
1
В родительском компоненте у меня есть <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 }} /> ); } }
Walter Monecke
2
Чистый гений, это именно то, что я искал :)
Sumit Sahoo
54

ВАЖНО, ЕСЛИ У ВАС ИЗВЕСТНЫЕ ИЗОБРАЖЕНИЯ (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
Замечательное решение для обработки известного набора изображений
Теди Канджиратхинкал 01
1
@TedyKanjirathinkal Я рад, что это помогло!
Вальтер Монеке 01
1
Спасибо, это будет полезно
Truca 08
@WalterMonecke: я получаю целое значение , если мы делаем , как это
Сабир
30

Если вы ищете способ создать список, например, перебирая массив 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
12

Как говорится в документации React Native , все ваши источники изображений должны быть загружены перед компиляцией вашего пакета.

Другим способом использования динамических изображений является использование оператора 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` }} />
Abranhe
источник
8

Сначала создайте файл с требуемым изображением - таким образом должны быть загружены образы React native.

активы / 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>
Ханна Карни
источник
Хорошее решение, мне это очень помогло! Ткс.
Fryla
Без проблем! Не удалось найти здесь хорошего решения, поэтому придумал свое :) Рад, что помог.
HannahCarney
6

Важная часть здесь: мы не можем объединить имя изображения внутри требования, например [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

Ритеш Читракар
источник
6
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>
  )}
}
Royal.O
источник
3

Для использования динамического изображения требуется

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}
      />
ßãlãjî
источник
2

Я знаю, что это устарело, но я собираюсь добавить это здесь, поскольку я нашел этот вопрос во время поиска решения. Документы позволяют использовать uri: "Сетевое изображение".

https://facebook.github.io/react-native/docs/images#network-images

Для меня у меня есть изображения, динамически работающие с этим

<Image source={{uri: image}} />
Дэйв Клиссолд
источник
2
 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput> 

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

в моем случае я так много пробовал, но, наконец, он работает. Изображение имени компонента StyledInput внутри StyledInput, если вы все еще не понимаете, дайте мне знать

Naved Khan
источник
2

Скажите, есть ли у вас приложение, которое имеет схожую функциональность с моим. Если ваше приложение в основном отключено, и вы хотите отображать изображения одно за другим. Ниже приведен подход, который работал у меня в 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

Для этого нужно использовать объект.

Например, предположим, что я сделал запрос AJAX к API, и он возвращает ссылку на изображение, которую я сохраню как imageLink:

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

Ричард Хо
источник
3
для динамических ссылок пути к изображениям это не работает: var img = "../img/icons/"+img_name+"_selected.png"; <br/> <Image source={{uri: img}} resizeMode={'contain'} />
Роберт Томас Г. IV,
4
хак для этого, если вы знаете, что все варианты img_name будут такими:var images = { 'first': require('../first.png'), 'second': require('../second.png') } <Image source={{uri:images[img_name]}} resizeMode={'contain'} />
Габриэль Лупу
2
Обратите внимание, что для предложения @GabrielLupu: таким образом вы распределяете все изображения в памяти. Это зависит от количества изображений и их размеров, однако вы, вероятно, столкнетесь с ошибками нехватки памяти.
Lashae