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

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

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

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

Ответы

Ответ 1

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

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

(Обратите внимание, что за Документы, что все компоненты в React Native являются display: 'flex' по умолчанию и display: 'inline'. Не существует вообще Таким образом, поведение по умолчанию для Text внутри View в React Native отличается от поведения по умолчанию для span пределах div в сети, в последнем случае span не будет заполнять ширину 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' на всех 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 на fooobar.com/questions/56000/....

6. Используйте position: 'absolute' и right: 0 в Text:

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

Как и в реальном CSS, это выводит Text "из потока", а это означает, что его братья и сестры смогут перекрывать его, и его вертикальное положение будет по умолчанию в верхней части View (хотя вы можете явно установить расстояние от верхней части). от View с помощью top свойство стиля).

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

Ответ 2

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

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

Ответ 3

Для меня настройка alignItems для родителя сделала трюк, например:

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

Ответ 4

Вы не должны использовать float в React Native. React Native использует flexbox для обработки всего этого.

В вашем случае вы, вероятно, захотите, чтобы в контейнере был атрибут

justifyContent: 'flex-end'

И о тексте, занимающем все пространство, опять же, вам нужно взглянуть на свой контейнер.

Вот ссылка на действительно великое руководство по flexbox: Полное руководство по Flexbox

Ответ 5

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

flexDirection: Если вы хотите перемещать горизонтально (строка) или вертикально (столбец)

justifyContent: направление, которое вы хотите переместить.

Ответ 7

Вы можете использовать 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