Nasıl yüzebilirsin: React Native'de?

Doğru yüzmek istediğim bir elementim var, mesela

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

Nasıl Textyüzdürülebilmektedir / sağa hizalanmış? Ayrıca, neden sadece "Merhaba" alanı yerine, Textalanın tamamını kaplıyor View?

Metin neden "Merhaba" alanı yerine Görünüm'ün tamamını kaplıyor?

Çünkü Viewesnek bir kaptır ve varsayılan olarak vardır flexDirection: 'column've alignItems: 'stretch'bu da çocuklarının genişliğini doldurmak için uzatılması gerektiği anlamına gelir.

(Not, başına docs , bu tüm Native tepki de bileşenleridir display: 'flex'varsayılan olarak ve bu display: 'inline'hiç yok Bu şekilde, bir varsayılan davranışı. TextBir dahilinde Viewiçinde varsayılan davranışlarından Yerli farklıysa tepki spanbir dahilinde divinternet üzerinde; ikinci durumda, yayılma olur olup genişliğini kaplar divnedeniyle bir spanvarsayılan bir satır içi elemanıdır. Yerli tepki böyle bir kavram yoktur.)

Metin nasıl sağa / sola hizalanabilir?

floatMülkiyet içinde Doğalöğesini tepki mevcut değilse, ancak orada yükler metninizi sağ hizalamak izin verir (biraz farklı davranışlar ile) size sunulan seçeneklerden. İşte aklıma gelenler:

1. Kullanım textAlign: 'right'üzerinde Texteleman

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(Bu yaklaşım Text, tüm genişliğini doldurduğu gerçeğini değiştirmez View; içindeki metni sağa hizalar Text.)

2. alignSelf: 'flex-end'üzerinde kullanınText

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

Bu, Textöğeyi içeriğini tutmak için gereken boyuta küçültür ve öğesinin çapraz yönünün (varsayılan olarak yatay yön) sonuna koyar View.

3. alignItems: 'flex-end'üzerinde kullanınView

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

Bu, alignSelf: 'flex-end'tüm Viewçocukların ayarlarına eşdeğerdir .

4. flexDirection: 'row've justifyContent: 'flex-end'üzerindeView

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row'mizanpajın ana yönünü dikey yerine yatay olacak şekilde ayarlar; justifyContentaynıdır alignItems, ancak çapraz yön yerine ana yönde hizalamayı kontrol eder.

5. flexDirection: 'row'üzerinde Viewve marginLeft: 'auto'üstündeText

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

Bu yaklaşım, web ve gerçek CSS bağlamında https://stackoverflow.com/a/34063808/1709587 adresinde gösterilmiştir .

6. position: 'absolute've right: 0üzerinde Text:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

Gerçek CSS'de olduğu gibi, bu Text"akıştan çıkar" anlamına gelir, yani kardeşleri üst üste gelebilir ve dikey konumu Viewvarsayılan olarak en üstte olacaktır (her ne kadar açıkça style özelliğini Viewkullanarak top).

Doğal olarak, bu çeşitli yaklaşımlardan hangisini kullanmak istediğiniz - ve bunlar arasındaki seçimin hiç önemli olup olmadığı kesin koşullarınıza bağlı olacaktır.

Öğenin hizalamasını doğrudan belirtebilirsiniz, örneğin:

textright: {    
  alignSelf: 'flex-end',  
},

Benim alignItemsiçin bir ebeveyne ayarlamak hile yaptı, gibi:

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});

React Native'de şamandıra kullanmanız gerekmez. Native React, tüm bu şeyleri işlemek için esnek kutuyu kullanır.

Sizin durumunuzda, büyük olasılıkla kapsayıcının bir niteliğe sahip olmasını isteyeceksiniz

justifyContent: 'flex-end'

Ve tüm alanı alan metin hakkında, yine, kabınıza bir göz atmanız gerekir.

Flexbox'ta gerçekten harika bir rehberin bağlantısı: Flexbox için Tam Bir Kılavuz

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection: Yatay (satır) veya dikey (sütun) hareket etmek istiyorsanız

justifyContent: hareket etmek istediğiniz yön.

Sen şamandıra: flex kullanarak doğal tepki:

 <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

daha fazla ayrıntı için: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction