Bagaimanakah Saya Boleh Memuatkan Imej Secara Dinamik dalam React Native Tanpa Ralat \'Memerlukan Modul Tidak Diketahui\'?

Keperluan Imej Dinamik dalam React Native

Apabila bekerja dengan modul React Native's Image, adalah penting untuk mempertimbangkan cara nama imej dirujuk apabila anda perlu menggunakan nama dinamik.

Dalam senario standard, menggunakan nama imej statik dalam fungsi require() berfungsi dengan sempurna. Walau bagaimanapun, menggunakan nama imej dinamik berpotensi menyebabkan komplikasi. Isu ini timbul apabila anda cuba memasukkan rentetan dengan nama imej dinamik menggunakan require('image!' 'avatar'). Akibatnya, anda mungkin menghadapi ralat "Memerlukan modul yang tidak diketahui" yang mengecewakan.

Sokongan Nama Imej Dinamik React Native

Malangnya, menurut dokumentasi React Native, terdapat had semasa bekerja dengan nama imej dinamik. Dalam bahagian yang dikhaskan untuk "Sumber Statik", dokumentasi menyatakan dengan jelas bahawa "satu-satunya cara yang dibenarkan untuk merujuk kepada imej dalam berkas adalah dengan menulis secara literal memerlukan('imej!nama-nama-aset') dalam sumber. " Ini bermakna anda tidak boleh hanya menggabungkan rentetan dengan nama imej untuk menjadikannya dinamik.

Mengendalikan Keperluan Imej Dinamik

Untuk mengatasi had ini, anda perlu menetapkan nama imej dinamik kepada pembolehubah. Begini cara anda boleh mencapai ini:

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

Sebagai alternatif, anda boleh menggunakan fungsi pembantu asset() daripada pakej react-native untuk memerlukan imej secara dinamik:

import { asset } from 'react-native';

const dynamicImageSource = asset('image!' + icon);

<Image source={dynamicImageSource} />

Ingat bahawa untuk kedua-dua kaedah ini, anda masih perlu menambahkan imej anda pada himpunan xcassets dalam apl anda di dalamnya Xcode.

Dengan mematuhi garis panduan ini, anda boleh menggunakan nama imej dinamik dengan berkesan dalam aplikasi React Native anda tanpa menghadapi ralat "Memerlukan modul yang tidak diketahui" yang digeruni.

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