Bagaimana Anda bisa mengapung: tepat di Bereaksi Asli?

Saya memiliki elemen yang ingin saya apung, misalnya

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

Bagaimana cara Textmelayang / disejajarkan ke kanan? Juga, mengapa Textmengambil ruang penuh dari View, bukan hanya ruang untuk "Halo"?

mengapa Teks mengambil ruang penuh Tampilan, bukan hanya ruang untuk "Halo"?

Karena itu Viewadalah wadah fleksibel dan secara default memiliki flexDirection: 'column'dan alignItems: 'stretch', yang berarti bahwa anak-anaknya harus ditarik untuk mengisi lebarnya.

(Catatan, per docs , yang semua komponen di Bereaksi asli yang display: 'flex'secara default dan bahwa display: 'inline'tidak ada sama sekali cara ini, perilaku default dari. TextDalam Viewdi Bereaksi berbeda asli dari perilaku default spandalam divdi web; dalam kasus terakhir, rentang tidak akan memenuhi lebar divkarena a spanadalah elemen inline secara default. Tidak ada konsep seperti itu di React Native.)

Bagaimana Teks dapat diapungkan / disejajarkan ke kanan?

The floatproperti tidak eksis di Bereaksi asli, tetapi ada banyak pilihan yang tersedia untuk Anda (dengan perilaku yang sedikit berbeda) yang akan membiarkan Anda benar-menyelaraskan teks Anda. Inilah yang dapat saya pikirkan:

1. Gunakan textAlign: 'right'pada Textelemen

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

(Pendekatan ini tidak mengubah fakta bahwa Textmengisi seluruh lebar View; hanya tepat menyelaraskan teks dalam Text.)

2. Gunakan alignSelf: 'flex-end'padaText

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

Ini menyusutkan Textelemen ke ukuran yang diperlukan untuk menyimpan kontennya dan menempatkannya di ujung arah silang (arah horizontal, secara default) dari View.

3. Gunakan alignItems: 'flex-end'padaView

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

Ini setara dengan pengaturan alignSelf: 'flex-end'pada semua Viewanak.

4. Gunakan flexDirection: 'row'dan justifyContent: 'flex-end'padaView

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

flexDirection: 'row'menetapkan arah utama tata letak menjadi horizontal, bukan vertikal; justifyContenthanya seperti alignItems, tetapi mengontrol perataan dalam arah utama, bukan arah silang.

5. Gunakan flexDirection: 'row'pada Viewdan marginLeft: 'auto'padaText

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

Pendekatan ini ditunjukkan, dalam konteks web dan CSS nyata, di https://stackoverflow.com/a/34063808/1709587 .

6. Gunakan position: 'absolute'dan right: 0pada Text:

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

Seperti dalam CSS nyata, ini mengambil Text"out of flow", yang berarti bahwa saudara kandungnya akan dapat tumpang tindih dan posisi vertikal akan berada di bagian atas Viewsecara default (meskipun Anda dapat secara eksplisit mengatur jarak dari atas Viewmenggunakan topproperti style).

Tentu saja, mana dari berbagai pendekatan yang ingin Anda gunakan - dan apakah pilihan di antara mereka bahkan penting - akan tergantung pada keadaan Anda yang sebenarnya.

Anda dapat langsung menentukan perataan item, misalnya:

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

Bagi saya pengaturan alignItemske orang tua melakukan trik, seperti:

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

Anda tidak seharusnya menggunakan pelampung di Bereaksi Asli. Bereaksi Asli memanfaatkan flexbox untuk menangani semua hal itu.

Dalam kasus Anda, Anda mungkin ingin agar wadah memiliki atribut

justifyContent: 'flex-end'

Dan tentang teks yang mengambil seluruh ruang, sekali lagi, Anda perlu melihat wadah Anda.

Berikut ini tautan ke panduan hebat di flexbox: Panduan Lengkap untuk Flexbox

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

flexDirection: Jika Anda ingin bergerak secara horizontal (baris) atau vertikal (kolom)

justifyContent: arah yang ingin Anda pindahkan.

Anda dapat mengapung: langsung bereaksi asli menggunakan flex:

 <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>

untuk detail lebih lanjut: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction