Bagaimana untuk Memaparkan Imej Dinamik Dalam React Native?

Nama Imej Dinamik dalam React Native: Menggunakan Modul Image Require

Apabila bekerja dengan React Native, modul Imej membenarkan anda memaparkan imej dalam aplikasi anda. Biasanya, imej boleh dirujuk secara statik menggunakan sintaks require('image!name-of-the-asset').

Walau bagaimanapun, soalan biasa timbul apabila cuba menggunakan nama imej dinamik. Sebagai contoh, jika anda mempunyai rentetan dinamik yang mewakili nama imej, seperti 'avatar', kod berikut tidak akan berfungsi:

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

Ini akan mengakibatkan ralat "Memerlukan modul tidak diketahui "image!avatar "".

Penjelasan

Menurut dokumentasi React Native, sumber statik mesti dirujuk terus menggunakan sintaks statik yang dinyatakan sebelum ini. Memuatkan imej secara dinamik tidak disokong.

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

// Incorrect:
var icon = 'my-icon-active';
<Image source={require('image!' + icon)} />

Penyelesaian Alternatif

Jika anda perlu menggunakan nama imej dinamik, anda boleh menyimpan aset imej dalam tatasusunan berasingan atau objek dan kemudian merujuknya menggunakan prop sumber komponen Imej:

const images = {
  avatar: require('image!avatar'),
  logo: require('image!logo'),
};

<Image source={images[dynamicImageName]} />

Tambahan Nota

Untuk iOS, anda mesti ingat untuk memasukkan imej anda dalam katalog aset dalam projek Xcode anda. Ini adalah perlu untuk imej dirujuk dengan betul dalam aplikasi React Native anda.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Imej Dinamik Dalam React Native?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!