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

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

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

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

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

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

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

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

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

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

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

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

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

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

ВАЖНО, ЕСЛИ У ВАС ИЗВЕСТНЫЕ ИЗОБРАЖЕНИЯ (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} />

Я знаю, что это не самый эффективный способ, но это определенно обходной путь.

Надеюсь, поможет!

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

2. Затем импортируйте данные в наш компонент и прокрутите список с помощью 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>
  )}
/>

Удачи!

Как говорится в документации 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` }} />

Сначала создайте файл с требуемым изображением - таким образом должны быть загружены образы 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>

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

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

вы можете использовать

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

показать изображение.

из:

https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

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

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

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

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

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

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

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

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

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

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

3. Теперь создайте компонент с именем 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;

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

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

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

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

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