Bagaimanakah Saya Boleh Memuatkan Imej Secara Dinamik dalam Modul Memerlukan Imej Asli React?

Nama Imej Dinamik dalam Modul React Native Image Require

Dalam React Native, modul Image Require membenarkan pembangun memuatkan sumber imej statik ke dalam mereka aplikasi. Walaupun modul berfungsi dengan sempurna dengan nama fail imej statik, nama imej dinamik sering membawa kepada ralat.

Isu:

Seorang pembangun cuba menggunakan rentetan dinamik untuk nama fail imej :

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

Walau bagaimanapun, React Native melemparkan ralat yang menunjukkan modul yang tidak diketahui, sebagai digambarkan di bawah:

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

Resolusi:

Menurut bahagian "Sumber Statik" dokumentasi React Native, nama imej mesti dinyatakan secara statik dalam atribut sumber:

// GOOD
<Image source={require('image!my-icon')} />

Menggunakan rentetan dinamik untuk nama fail imej adalah secara eksplisit tidak digalakkan:

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

Sebaliknya, penyelesaiannya ialah menggunakan pemaparan bersyarat untuk menetapkan nama fail imej statik kepada pembolehubah:

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

Pertimbangan Tambahan:

• Sumber imej statik mesti ditambahkan pada berkas xcassets dalam Xcode aplikasi.
• Maklumat lanjut tentang menambah sumber statik pada apl React Native tersedia di http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your -apl-menggunakan-imej-xcassets.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memuatkan Imej Secara Dinamik dalam Modul Memerlukan Imej Asli React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!