Usare <Immagine> con un file locale

La documentazione dice che l’unico modo per fare riferimento a una immagine statica, è quello di utilizzare lo richiedono.

Ma io non sono sicuro da dove viene reagire aspettare di avere quelle immagini. Gli esempi non hanno alcun dominio, così sembra che devi andare a Xcode e aggiungerli alle Immagini.xcassets, ma che non ha funzionato per me.



8 Replies
  1. 20

    Funziona esattamente come ci si aspetta di lavorare. C’è un bug https://github.com/facebook/react-native/issues/282 che gli impedisce di funzionare correttamente.

    Se si dispone di node_modules (con react_native) nella stessa cartella del progetto xcode, è possibile modificare node_modules/react-native/packager/packager.js e questo cambiamento: https://github.com/facebook/react-native/pull/286/files . Funzionerà magicamente 🙂

    Se il tuo react_native è installato da qualche altra parte e la patch non funziona, commentare https://github.com/facebook/react-native/issues/282 per far loro conoscere la vostra installazione.

    • Grazie. Vorrei fino voto la tua risposta, ma io sono ancora troppo nuovo in StackExchange. Comunque, segnalato come buona 🙂
    • Non è necessario modificare il file più. La correzione sembra essere il drag/drop di immagini per l’attività bundle e mantenere il nome stesso come il nome del file su disco.
  2. 24

    Utilizzo di Reagire Nativo 0.41 (a Marzo 2017), il targeting per iOS, ho trovato molto semplice:

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

    Il file di immagine deve trovarsi nella stessa cartella del .js file richiesto.

    Non ho dovuto modificare nulla nel progetto XCode. Appena lavorato. Forse le cose sono cambiate molto in 2 anni!

    Nota che se il nome del file è diverso da lettere minuscole, o il percorso è nulla di più “./”, quindi per me, è iniziato fallendo. Non sono sicuro che le restrizioni sono, ma semplice e lavorare in avanti.

    Spero che questo aiuta qualcuno, come tutte le risposte di cui sopra sembrano eccessivamente complesso e pieno di (cattivo) off-site link.

    AGGIORNAMENTO: BTW – La documentazione ufficiale per questo è qui:
    https://facebook.github.io/react-native/docs/images.html

    • Anche la documentazione ufficiale dice – posso fare una cartella denominata img e poi posso mettere tutte le immagini in quella cartella. Non funziona per me ! Ho messo tutte le immagini nella stessa cartella dove .js è. Strano!!!!!
  3. 5

    Dal UIExplorer esempio di applicazione:

    Statico attività deve essere richiesto dal prefisso con image! e si trovano in app bundle.

    Usare <Immagine> con un file locale

    In questo modo:

    render: function() {
      return (
        <View style={styles.horizontal}>
          <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
          <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
          <Image source={require('image!uie_comment_normal')} style={styles.icon} />
          <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
        </View>
      );
    }
    
    • Oh! Non ho notato questo esempio con le immagini. Grazie per il puntamento. Ancora, non sono stato in grado di farlo funzionare sul mio progetto di test. Continua a cercare e poi posto il mio risultato
    • Dove posizionare l’immagine nel progetto? Ho cercato di aggiungere in Immagini.xcassets trascinandolo in Xcode, ma solo ottenere ‘modulo sconosciuto “immagine!sfondo”. Il codice è qui: gist.github.com/StefanWallin/3abbb026c03615545bd8
    • Così, alla fine il mio problema era legato ai pacchetti. Questa risposta aiutato a risolvere il problema.
  4. 5

    Ho avuto questo stesso problema fino a quando ho capito non ho messo l’immagine nel mio Image.xcassets. Sono stato in grado di trascinare in Xcode Image.xcassets aperto e dopo la ricostruzione, è stato risolto il problema!

    Usare <Immagine> con un file locale

  5. 1

    Ho avuto problemi con il reagire nativo di navigazione, ho creato la mia intestazione componente, poi è stato inserito un immagine come logo sulla sinistra prima il titolo, poi, quando ero attivazione passare a un’altra schermata e poi di nuovo, il logo di caricamento di nuovo, con un timeout vicino 1s, il mio file locale. La mia soluzione :

    Logo.json

    {"file" : "base64 big string"}
    

    App.js

    import Logo from '.../Logo.json'
    ...
    <Image source:{{uri:Logo.file}} />
    
  6. 0

    Per visualizzare l’immagine da una cartella locale, è necessario scrivere codice:

     <Image source={require('../assets/self.png')}/>
    

    Qui ho messo la mia immagine nella cartella attività.

  7. -10

    È necessario aggiungere all’origine di proprietà di un oggetto con una proprietà denominata “uri” in cui è possibile specificare il percorso dell’immagine, come si può vedere nel seguente esempio:

    <Image style={styles.image} source={{uri: "http://www.mysyte.com/myimage.jpg"}} />
    

    ricordate poi di impostare la larghezza e l’altezza tramite la proprietà di stile:

    var styles = StyleSheet.create({
       image:{
        width: 360,
        height: 40,
      }
    });
    
    • Penso che OP era alla ricerca di come fare le immagini statiche, invece di rete-caricato quelli.

Lascia un commento