Reagire immagini locali native con URI su Android

Question

Ho cercato in giro e non ho ancora trovato la soluzione corretta per questo. Ho l'applicazione che visualizza le immagini alcun problema con uri su iOS utilizzando il seguente codice dopo l'aggiunta di un riferimento cartella locale al progetto XCode:

<Image style={styles.catimg} source={{uri: "imgs/1.png"}} /> 

Ma su Android non riesco a capire dove mettere le immagini e come fare riferimento a loro nel codice. Alcune persone hanno detto di una cartella chiamata 'drawable-hdpi' in Android/app/src/main/res/drawable-hdpi ma la compilazione fallisce se questa cartella viene aggiunta lì. Al momento ci sono solo le cartelle mipmap.

Answer 1

The React Native Image doc è abbastanza buono!

immagini statiche

A partire dal Reagire Native 0,14, si consiglia l'utilizzo di immagini statiche in questo modo:

<Image style={styles.catimg} source={require("./imgs/1.png")} /> 

Ecco alcuni vantaggi che si ottiene:

1. stesso sistema su iOS e Android.
2. Le immagini si trovano nella stessa cartella del codice JS. I componenti sono autonomi.
3. Nessun spazio dei nomi globale, ad esempio non ti preoccupare delle collisioni di nomi.
4. Solo le immagini effettivamente utilizzate verranno inserite nella tua app.
5. L'aggiunta e la modifica delle immagini non richiede la ricompilazione delle app, è sufficiente aggiornare il simulatore come al solito.
6. Il packager conosce le dimensioni dell'immagine, non è necessario duplicarlo nel codice.
7. Le immagini possono essere distribuite tramite pacchetti npm.

immagini da parte dei nativi

Tuttavia, si potrebbe ancora voglia di utilizzare un'immagine dal lato nativo, se per esempio, si stanno costruendo un'applicazione ibrida (alcune interfacce utente in Reagire Nativo, alcune interfacce utente in codice della piattaforma).

Su Android, le immagini verranno effettivamente lette dalle cartelle android/app/src/main/res/drawable-*.

Quando si crea una nuova app React Native, sono presenti solo le cartelle mipmap. Le cartelle mipmap sono solo per le icone dell'app/launcher. Qualsiasi altra risorsa utilizzabile deve essere inserita nelle cartelle disegnabili pertinenti come in precedenza. More info here.

Quindi è necessario creare almeno una cartella drawable, ad esempio android/app/src/main/res/drawable-hdpi, quindi inserire l'immagine imgs_1.png in essa.

Sfortunatamente, le cartelle drawable non possono contenere sottodirectory. More info here.

Inoltre, il nome dell'immagine deve iniziare con una lettera e può contenere solo lettere minuscole, numeri o caratteri maiuscoli. See this, ad esempio.

Allora sarete in grado di utilizzare l'immagine come questo, senza l'estensione:

<Image style={styles.catimg} source={{uri: "imgs_1"}} />