Pertanyaan Bereaksi Gambar asli dengan nama dinamis


Ini tidak masalah:

<Image source={require('./images/ace.png')} />

Tapi ini:

var name = 'ace';

<Image source={require('./images/' + name + '.png')} />

Saya sudah mencoba semua jenis variasi tetapi selalu mengembalikan kesalahan:

Membutuhkan modul yang tidak dikenal "./images/ace.png". Jika Anda yakin modulnya ada di sana, cobalah menyalakan kembali pembuat paket.


9
2017-11-27 09:31


asal


Jawaban:


Sesuai dokumen asli,

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

Bagaimana tentang mendeklarasikan apa yang diperlukan dan menggunakannya secara kondisional?


3
2017-11-28 03:30



Coba gunakan url

<Image
    style={styles.img}
    resizeMode={'contain'}
    source={{uri: imageURL}}>

dan di imageURL yang mungkin merupakan URL

sebagai contoh

var imageURL = 'http://assets22.pokemon.com/assets/cms2/img/pokedex/full/702.png'

0
2017-11-27 13:45



Solusi saat ini, komponen bernama Row:

const Row = (props) => {
  let employmentType;

  // Set my own image component dynamically
  if(props.SOME_CONDITION){
     employmentType = <Image source={require('image!Driver')} style={styles.employeeLogo} />
  }
  else{
     employmentType = <Image source={require('image!ANOTHERIMAGE')} style={styles.employeeLogo} />
  }

  return(
    <View style={styles.row_container} elevation={2}>

      {employmentType}
      <Text style={styles.row_text}>{'../Assets/Images/' + props.PictureUrl + '.png'}</Text>
      <Text style={styles.row_text}>{props.Fullname}</Text>
      <Text style={styles.row_text}>{props.EmploymentType}</Text>
    </View>
  );
};

-1
2017-09-14 16:36