현재 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 번들에 이미지를 추가하는 것을 기억해야합니다. 귀하의 의견에서 이미 그렇게 한 것처럼 보이지만.
답변
이것은 나를 위해 일했습니다.
이미지가 웹에서 가져온 것인지 로컬 폴더에서 전달되는지 확인하기 위해 부울을받는 사용자 정의 이미지 구성 요소를 만들었습니다.
// 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 배열을 반복하여 목록을 만드는 방법을 찾고 있다면이 방법이 적합합니다.
- 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;- 그런 다음 컴포넌트에서 데이터를 가져오고 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
