React Native-동적 이름을 사용하는 이미지 요구 모듈

현재 React Native를 사용하여 테스트 앱을 구축하고 있습니다. 이미지 모듈은 지금까지 잘 작동했습니다.

예를 들어라는 이미지가있는 경우 avatar아래 코드 조각이 제대로 작동합니다.

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

하지만 동적 문자열로 변경하면

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

오류가 발생합니다.

알 수없는 모듈 "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} />

그러나 Xcode에서 앱의 xcassets 번들에 이미지를 추가하는 것을 기억해야합니다. 귀하의 의견에서 이미 그렇게 한 것처럼 보이지만.

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. ProfilesDB.js와 같은 파일 (JSON 데이터베이스 보관 용)을 만듭니다.

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

행운을 빕니다!

(가)으로 기본 문서가 말한다 반작용 , 모든 이미지 소스의 요구는 번들을 컴파일하기 전에로드 할

따라서 동적 이미지를 사용할 수있는 또 다른 방법은 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 네이티브 이미지는이 방식으로로드해야합니다.

assets / 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')]와 같이 require 안에 이미지 이름을 연결할 수 없습니다.

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. 이제 Reources / Images 폴더 의 모든 이미지를 인덱싱하는 Index.js (Resources / Images에 있음) 라는 파일을 만듭니다 .

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

3. 이제 선택한 폴더에 ImageView라는 구성 요소를 만듭니다. 함수, 클래스 또는 상수 구성 요소를 만들 수 있습니다. Const 구성 요소를 사용했습니다. 이 파일은 Index에 따라 Image를 반환하는 역할을합니다.

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 인덱스 = {this.qno + 1} />

이를 위해 객체를 사용해야합니다.

예를 들어 API에 AJAX 요청을했고 다음과 같이 상태에 저장할 이미지 링크를 반환한다고 가정 해 보겠습니다 imageLink.

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