React Native-動的な名前を使用した画像要求モジュール
現在、React Nativeを使用してテストアプリを構築しています。 Imageモジュールは、これまでのところうまく機能しています。
たとえば、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バンドルに画像を追加することも忘れないでください。コメントからは既に行っているようです。
これは私のために働いた：
ブール値を使用して、画像がWebからのものであるか、ローカルフォルダーから渡されているかを確認するカスタム画像コンポーネントを作成しました。
// 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配列をループしてリストを作成する方法を探している場合は、これが有効です。
- ファイルを作成します（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;- 次に、コンポーネントにデータをインポートし、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
React Native Documentation says のように、バンドルをコンパイルする前にすべての画像ソースをロードする必要があります
したがって、動的画像を使用する別の方法は、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` }} />
<StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput>
<Image
source={this.props.imgUri}
style={{
height: 30,
width: 30,
resizeMode: 'contain',
}}
/>
私の場合、私はたくさん試してみましたが、最終的には動作しますStyledInputコンポーネント名 StyledInput内の画像
ここで重要な部分：[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
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>
)}
}
私はこれが古いことを知っていますが、解決策を探しながらこの質問を見つけたので、ここに追加します。ドキュメントでは、uri： 'Network Image'が許可されています。
https://facebook.github.io/react-native/docs/images#network-images
私はこれで動的に動作する画像を得ました
<Image source={{uri: image}} />