React Native - Image Require Module с использованием динамических имен

Ответ 1

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

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

Ответ 2

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

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

// 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') в качестве реквизита. Оно работает!

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

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

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

от

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

Ответ 6

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

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

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

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

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

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

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