React Yerli yerel görüntülere Android ile URI

Question

Etrafında arama yaptım ve bunun için doğru çözümü bulamadık. Ben XCode projenize yerel bir klasör başvuru ekledikten sonra aşağıdaki kodu kullanarak iOS'da uri ile görüntüleri sorun görüntüleyen uygulaması var:

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

Ama

Android'de oldukça görüntüleri koymak için nereye anlamaya edemez ve Onlara kodda nasıl başvurulur. Bazı insanlar android/app/src/main/res/drawable-hdpi'de 'drawable-hdpi' adlı bir klasör hakkında bir şeyler söylediler, ancak bu klasör eklendiğinde yapı başarısız oluyor. Şu anda sadece mipmap klasörleri var.

Answer 1

Doğal olarak tepki Image doc oldukça iyi! Yerli 0,14 Tepki As

Statik görüntüler

, bu kadar gibi statik resimleri kullanmanızı öneririz: Burada

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

Alacağınız bazı faydaları şunlardır:

1. aynı sistemi iOS'ta ve Android.
2. Görüntüler, JS kodunuzla aynı klasörde görüntülenir. Bileşenler bağımsızdır.
3. Genel ad alanı yok, ör. Ad çakışmaları hakkında endişeniz yok.
4. Sadece gerçekte kullanılan görüntüler uygulamanıza paketlenir.
5. Resimlerin eklenmesi ve değiştirilmesi, uygulamanın yeniden derlenmesini gerektirmiyor, simülatörü normalde yaptığınız gibi yenilemeniz yeterlidir.
6. Paketleyici, görüntü boyutlarını bilir, kodda çoğaltmaya gerek yoktur.
7. Görüntüler npm paketleri ile dağıtılabilir. Örneğin, bir melez app inşa eğer

   Ancak Yerli taraftan

Görüntüler, hala istiyorum, yerli taraftan bir resim kullanmak olabilir (bazı UI bazı UI platformu kodunda, Yerli Tepki).

Android'de, görüntüler gerçekten android/app/src/main/res/drawable-* klasörlerinden okunacak.

Yeni bir React Native uygulaması oluşturduğunuzda, yalnızca mipmap klasörleri bulunur. Mipmap klasörleri yalnızca uygulamanız/başlatıcı simgeleriniz içindir. Kullandığınız diğer çekilebilir varlıklar, daha önce olduğu gibi ilgili çizilebilir klasörlere yerleştirilmelidir. More info here. Bu nedenle, android/app/src/main/res/drawable-hdpi diyelim, en az bir drawable klasörü oluşturmalısınız, sonra görüntünüze imgs_1.png yerleştirin.

Ne yazık ki, drawable klasörleri alt dizinler içeremez. More info here. Ayrıca, görüntü adı bir harfle başlamalıdır ve yalnızca küçük harfler, sayılar veya boyutsuz karakter içerebilir. Örneğin, See this.

Sonra uzantısı olmadan bu, gibi resim kullanmak mümkün olacak:

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