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

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

행운을 빕니다!

---

당신이 사용할 수있는

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

이미지를 표시합니다.

에서:

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

---

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

따라서 동적 이미지를 사용할 수있는 또 다른 방법은 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` }} />

---

여기서 중요한 부분 : [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>
  )}
}

---

I know this is old but I'm going to add this here as I've found this question, whilst searching for a solution. The docs allow for a uri: 'Network Image'

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

For me I got images working dynamically with this

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

in my case i tried so much but finally it work StyledInput component name image inside the StyledInput if you still not understand let me know

---

You should use an object for that.

For example, let's say that I've made an AJAX request to an API and it returns an image link that I'll save to state as imageLink:

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

참고URL : https://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names