Как вы можете плавать: прямо в React Native?

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

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

Как можно Textплавать / выравнивать вправо? Кроме того, почему он Textзанимает все пространство Viewвместо "Hello"?

почему текст занимает все пространство представления, а не просто "Hello"?

Потому что Viewэто гибкий контейнер и по умолчанию имеет flexDirection: 'column'и alignItems: 'stretch', что означает, что его дочерние элементы должны быть растянуты, чтобы заполнить его ширину.

(Обратите внимание, в соответствии с документами , что все компоненты в React Native display: 'flex'по умолчанию являются и display: 'inline'вообще не существуют. Таким образом, поведение по умолчанию для элемента Textвнутри Viewв React Native отличается от поведения по умолчанию для элемента spanвнутри divв Интернете; в последнем случае span не будет заполнять ширину, divпотому что a 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свойство style).

Естественно, какой из этих различных подходов вы хотите использовать - и будет ли вообще важен выбор между ними - будет зависеть от ваших конкретных обстоятельств.

Вы можете напрямую указать выравнивание элемента, например:

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: направление, в котором вы хотите двигаться.

Вы можете использовать float: right в соответствии с native, используя 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