Як можна плавати: прямо в React Native?

У мене є, наприклад, елемент, який я хочу плавати правильно

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

Як Textплаваючий / вирівняний праворуч? Крім того, чому він Textзаймає повний простір View, а не просто місце для "Привіт"?

чому текст займає повний простір Перегляду, а не просто місце для "Привіт"?

Оскільки Viewє ємним гнучким контейнером і за замовчуванням має, flexDirection: 'column'і alignItems: 'stretch'це означає, що його дітей слід розтягнути, щоб заповнити його ширину.

(Зауважте, згідно з документами , що всі компоненти в React Native display: 'flex'за замовчуванням є , а їх display: 'inline'взагалі не існує. Таким чином, поведінка за замовчуванням Textв a Viewв "React Native" відрізняється від поведінки за замовчуванням spanв мережі divв Інтернеті; в останньому випадку проміжок не заповнюватиме ширину, divтому що а spanє вбудованим елементом за замовчуванням. У React Native такого поняття немає.)

Як Текст можна плавати / вирівнювати праворуч?

floatВластивість не існує в React Native, але є навантаження варіантів , доступні для вас (з трохи різним поведінкою) , які дозволять вам право вирівняти текст. Ось які я можу придумати:

1. Використовуйте textAlign: 'right'на Textелементі

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

(Цей підхід не змінює факту, що Textзаповнює всю ширину Viewтексту; він просто вирівнює текст у праві Text.)

2. Використовуйте alignSelf: 'flex-end'наText

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

Це зменшує Textелемент на розмір, необхідний для утримання його вмісту, і ставить його в кінці напряму хреста (горизонтальний напрямок, за замовчуванням)View .

3. Використовуйте alignItems: 'flex-end'наView

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

Це еквівалентно встановленню alignSelf: 'flex-end'на всіView дітей.

4. Використовуйте flexDirection: 'row'і justifyContent: 'flex-end'наView

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

flexDirection: 'row'встановлює головний напрямок компонування горизонтальним замість вертикального; justifyContentтак само, якalignItems , але контролює вирівнювання в основному напрямку замість поперечного напрямку.

5. Використовуйте flexDirection: 'row'на Viewі marginLeft: 'auto'наText

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

Цей підхід продемонстровано в Інтернеті та реальній CSS за адресою https://stackoverflow.com/a/34063808/1709587 .

6. Використання position: 'absolute'і right: 0на Text:

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

Як і в реальному CSS, це сприймає Text"витік з потоку", тобто його побратими зможуть перекривати його, а його вертикальне положення буде за Viewверсією за замовчуванням (хоча ви можете чітко встановити відстань від вершини Viewвикористовуючи topвластивість стилю).

Природно, який з цих різних підходів ви хочете використовувати - і чи взагалі має значення вибір між ними - залежатиме від ваших точних обставин.

Ви можете безпосередньо вказати вирівнювання елемента, наприклад:

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

Для мене налаштування alignItemsна батька зробило таке завдання, як:

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

Ви не повинні використовувати поплавці в React Native. React Native використовує Flexbox, щоб обробляти всі ці речі.

У вашому випадку, ймовірно, ви хочете, щоб контейнер мав атрибут

justifyContent: 'flex-end'

А щодо тексту, який займає весь простір, знову ж таки, вам потрібно поглянути на ваш контейнер.

Ось посилання на справді чудовий путівник по flexbox: Повне керівництво по Flexbox

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

flexDirection: Якщо ви хочете рухатись горизонтально (рядок) або вертикально (стовпець)

justifyContent: напрямок, який потрібно рухати.

Ви можете плавати: прямо у реагуванні на рідну, використовуючи 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>

для більш детальної інформації: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction