React Native - модуль Image Require з використанням динамічних імен

Зараз я будую тестовий додаток за допомогою React Native. Наразі модуль Image працює нормально.

Наприклад, якщо у мене було зображення з іменем 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 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` }} />

По-перше, створіть файл із необхідним зображенням - React native images повинен бути завантажений таким чином.

активи / 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' + vavable + '. 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. Спочатку створіть папку з назвою Ресурси / Зображення та розмістіть там усі свої зображення.
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}}