Tepki Yerli Bileşenleri Sarın

Not: Bu yayın eski. Metin bileşenlerini “kaydırmanın” en iyi uygulama olduğunu söyleyeceğimi sanmıyorum. Bunun yerine, kullandığım yarım düzine font stillerini, gerektiğinde stil (veya duygu) tanımlarına alınabilen ve aktarılabilen ayrı bir dosyada tanımladım.

Bir kişi çekirdek React Native bileşenlerinin sınıflar olduklarından, genişletilmeleri gerektiğini düşünebilir. Ancak Dan Abramov'un belirttiği gibi, bu iyi bir fikir değil. Daha yüksek dereceli bileşenleri uygulayabilirsiniz, ancak gerçekten ihtiyacınız olan şey, yalnızca belirli çekirdek tepki gösteren bileşenlerin kullanımını biraz daha güçlü bir şeyle değiştirmek. Ambalajın geldiği yer orası.

Bir çekirdek RN bileşenini bir miktar UI işlevine sayarak kodunuzu temiz tutar ve aynı zamanda genel özellikleri de belirlersiniz. Deneyimli RN geliştiricileri için, stil sayfalarınıza bakın ve mizanpaj sorunlarıyla başa çıkmak için Stil Sayfası'nı kaç kez kullandığınızı öğrenin. Ondan kurtulmak ister misin? Yaptım. Acemiler için, bu yazının size esnekliği kolaylaştıran bir araç vererek flexbox öğrenmenize yardımcı olacağını umuyorum.

Bu grafik kısaca nasıl çalıştığını gösterir. Daha sonra üzerinden geçeceğim. Ancak ilk önce bazı RN çekirdek bileşenlerini kendi özel kodunuza sarmanın neden bu kadar önemli olduğunu belirtmek istiyorum.

Bu, kullanmayı sevdiğim ve açık kaynaklı olduğum sarılmış bir bileşen örneği. Ancak daha sık bulacaksınız, kendinize sarmanız gerekir. Açıklayacağım.

Yayımlanmış iki yerel tepki uygulaması yarattım ve son projeyi yeniden gözden geçirdikten sonra mutlaka sarmanız gereken 3 üç şey olduğuna karar verdim.

  1. Metin
  2. Dokunulabilir
  3. Görünüm

Açık olmak gerekirse, sarma, kendi Text bileşeninizi RN'den src yerine src'den aldığınız ve kullandığınız anlamına gelir. Seninkiler onu saracak.

Metin

Neredeyse iki nedenden dolayı Metin sarmak zorunda. Bunun bir nedeni, uygulamanızın her bileşeninde aynı fontFamily'yi içe aktarmak ve ilan etmek istememenizdir. Bir Yazı tipini tüm Metin bileşenleri için varsayılan olarak ayarlamak veya bir şekilde yazı tipleri arasında kolayca geçiş yapmak istersiniz.

Başka bir neden, React Native UI hakkında anlamanız gereken daha büyük bir konuya değiniyor. FontSize, farklı çözünürlüklerde farklı cihazlarda farklı görünecek bir piksel miktarıdır. Bu aynı zamanda yükseklik, genişlik, kenar boşluğu, dolgu ve mutlak konumlandırma için de geçerlidir. Bu nedenle, mümkünse mizanpajlar için her zaman esnek kullanmaya çalışmalısınız ve mümkünse, bu özellikleri ayarlarken getPixelSizeForLayoutSize öğesini kullanmayı düşünün. Bu bir acıdır, ama ilk önce flexbox ile her şeyi başarmaya çalışmak için bir neden düşünün.

Ancak, Metin için fontSize'ı bir şekilde piksel olarak ayarlamaktan kaçınmanız gerekir. Size sadece bu SO gönderisinden ödünç alarak ne kullandığımı göstereceğim.

Özünde, bu şekilde sarma aslında sahne stilleri ile eşleştiriliyor. Bazıları bunun bir anti-model olduğunu düşünebilir, ancak sonuç, asgari düzeyde düşünen geliştirici için harika bir araçtır. Metni ‘tepki-yerel’den almak yerine,‘ /components/Text.js ’den veya koymak istediğiniz yere nereye koyacağınıza

Maruz kalan aksesuarlar stillerinizin çoğunluğunu kapsamalıdır, bu nedenle bir Stil Sayfası girişi yapmanız gerekmeyebilir.

İşte bu şekilde kullanıyorum. Oldukça temiz ve bu metnin bir stil sayfasına başvurmak zorunda kalmadan nasıl görüneceğini biliyorum.

Dokunulabilir

Bunları sarmak için pek çok modül var, ama hiçbiri çok popüler olmasa da, asıl önemli olan, Touchable'ın (NativeFeedback, vb.) Hem iOS hem de Android'de farklı şekilde ele alınmasıdır, bu yüzden bunu React'ten almamanız gerekir. Yerli. Çok sayıda Button uygulaması bulabilirsiniz, ancak bunlar yerleşik stillere sahip olma eğilimindedir.

Görünüm

Görünüm için tepki-native-row bileşenimi incelemeyi öneririm.

Son uygulamamın kullanıcı arayüzünü yeniden yapılandırmaya başladıktan sonra bir şeye karar verdim. Kullanılabilir ve kendi bildirimlerini hak eden unsurları bulmak yerine, öğelerini başka sahnelerde kullanılmayan sahneleri bulduğumu fark ettim.

Dağınıklığı azaltmanın başka yollarını düşündüm. FlexDirection'ı ayarlamak zorunda olduğumu hatırladım: çoğu zaman ayarlanan tek özellik satırdı. Bunu yapmak için View'in etrafına bir sarmalayıcı oluşturarak başladım. Ama sonra sadece hizalamaÖğretileri ve meşrulaştıran İçeriği kullandığım birçok kez farkettim.

Sonunda, yarısının yapacağını umduğum bir şeyi yapan bir sarıcı yarattığımı söylemeye yetti. Stylesheet bildirimlerimi gereksiz kılıyor.

Bu sahneyle başlayalım. Bu bir profil yönetimi ekranı. Butonlarda ve belki de logo dışında herhangi bir yeniden kullanılabilir bileşen yoktur. Gerçekten uygulamada başka hiçbir yerde kullanmayı planlamadığım bir ScrollView bileşeni var.

Dolayısıyla, esasen bu sayfanın asıl amacı, çoğu Metin olan unsurları düzenlemektir.

Böylece sayfanın üst kısmının koduna bakarak, satır içi stillerin ve Stil Sayfası kullanımının küçük bir karışımını görebilirsiniz. İdeal değil, ama birinin üzerinde olmanın avantajları beni hiçbir zaman bir kongre meselesi olarak dışlama konusunda ikna etmedi.

Eğimi ve yanlış stil kullanımını kabul ederek bunu biraz değiştirdim, ancak böyle şeyler oldu çünkü stilleri idare etmek için “daha ​​iyi” bir yola asla inmedim. Ama yine de burada gerçekten “stil” ilan ediyor muyuz? Metin stillerinin dışındaki her şey gerçekten sayfa düzeni ile ilgilidir.

Düzenleme stilleriyle nerede başa çıkmamız gerektiğini kendimize sorma ihtiyacını ortadan kaldırmaya başladım çünkü flexbox ile stil değiller. Flexbox, stillerin dışında kendine ait bir yeri hak ediyor çünkü çok güçlü, ancak çoğu zaman yanlış anlaşılıyor.

Flexbox mizanpaj atamasını daha sezgisel ve özlü olan bir şeyle değiştirdiğimizde ne olduğuna bakın.

Yeterince basit?

React-native-row hakkında not: Row, flexDirection özellikli bir Görünümdür: 'satır' ve arama, tüm alt bileşenlerin konumunu bir telefon kadranında 5 sayısının konumuna ayarlar - ve burada esnek olarak özelliği 1'e esnek.

Tepki-native-row ve yukarıdaki Text bileşenini kullanarak, tüm flexbox özelliklerini stilden tamamen çıkarıp sahnemi daha duyarlı hale getirdim.

Düşünceler?

Ben bir React uzmanı değilim, ancak React Native ile bir yıl geçirdim ve bu benim için anlamlı olan şey. Bunu uygulamak için daha iyi bir yolu var mı? Muhtemelen. Anti-patern mi? Olabilir. İnsanların ne düşündüğünü duymayı çok isterim.