ReactNative-動的な名前を使用した画像要求モジュール

Question 1

現在、ReactNativeを使用してテストアプリを構築しています。これまでのところ、Imageモジュールは正常に機能しています。

たとえば、という名前の画像がある場合avatar、以下のコードスニペットは正常に機能します。

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

しかし、それを動的な文字列に変更すると、

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

エラーが発生します：

不明なモジュール「image！avatar」が必要です。モジュールがそこにあることが確実な場合は、パッケージャーを再起動してみてください。

明らかにこれは不自然な例ですが、動的な画像名は重要です。React Nativeは動的画像名をサポートしていませんか？

動的画像名でネイティブエラーを反応させる

Question 2

これは、「静的リソース」セクションのドキュメントで説明されています。

バンドル内の画像を参照する唯一の許可された方法は、ソースに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

Question 3

これは私のために働いた：

ブール値を取り込んで、画像が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')を小道具として送っています。できます！

Question 4

既知の画像（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} />

私はそれが最も効率的な方法ではないことを知っていますが、それは間違いなく回避策です。

それが役に立てば幸い！

Question 5

たとえば、画像や説明の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>
  )}
/>

スニペットを展開

幸運を！

Question 6

ネイティブドキュメントは言うリアクトすべての画像源のニーズがあなたのバンドルをコンパイルする前にロードされるように、

つまり、動的画像を使用できる別の方法は、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` }} />

Question 7

まず、必要な画像を含むファイルを作成します-ReactNative画像はこの方法でロードする必要があります。

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>

Question 8

ここで重要な部分： [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

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

Question 10

あなたが使用することができます

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

画像を表示します。

から：

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

Question 11

requireを使用して動的画像に

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

Question 12

私はこれが古いことを知っていますが、解決策を探しているときにこの質問を見つけたので、ここにこれを追加します。ドキュメントはURIを許可します： 'ネットワークイメージ'

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

私にとっては、これで動的に機能する画像を取得しました

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

Question 13

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

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

私の場合、私はたくさん試しましたが、それでも理解できない場合は、StyledInput内のStyledInputコンポーネント名の画像が機能します。

Question 14

私と同じような機能を持つアプリケーションがあるとしましょう。アプリがほとんどオフラインで、画像を次々にレンダリングしたい場合。次に、ReactNativeバージョン0.60で私のために働いたアプローチを以下に示します。

まず、Resources / Imagesという名前のフォルダーを作成し、そこにすべての画像を配置します。
次に、（Resources / Imagesに）Index.jsという名前のファイルを作成します。このファイルは、Reources / Imagesフォルダー内のすべての画像のインデックス作成を担当します。

const Images = {'image1'：require（ './ 1.png'）、 'image2'：require（ './ 2.png'）、 'image3'：require（ './ 3.png'）}

次に、選択したフォルダーにImageViewという名前のコンポーネントを作成します。機能、クラス、または定数コンポーネントを作成できます。Constコンポーネントを使用しました。このファイルは、インデックスに応じて画像を返す役割を果たします。

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;

これで、静的画像を動的にレンダリングするコンポーネントから、ImageViewコンポーネントを使用してインデックスを渡すだけです。

<ImageView index = {this.qno + 1} />

Question 15

そのためにオブジェクトを使用する必要があります。

たとえば、APIにAJAXリクエストを送信し、次のように保存する画像リンクを返したとしますimageLink。

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