你怎么能漂浮:就在React Native？

Question

例如,我有一个我想浮动的元素

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

如何Text浮动/对齐到右边？另外,为什么Text占据了整个空间View,而不仅仅是"你好"的空间？

Answer 1

为什么Text会占用View的整个空间,而不仅仅是"Hello"的空间？

因为它View是一个弹性容器,默认情况下是flexDirection: 'column'和alignItems: 'stretch',这意味着它的子节点应该伸展以填充其宽度.

(请注意,每个的文档,即所有的成分发生化学反应原住民是display: 'flex'在默认情况下,并且display: 'inline'完全不存在这样的一个默认行为.Text一个内View从默认的行为做出反应母语不同span内的div在网络上;在后一种情况下,span 不会填充the的宽度,div因为span默认情况下a 是内联元素.React Native中没有这样的概念.)

如何将文本浮动/对齐到右边？

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

这种方法在Web和真实CSS的上下文中通过/sf/answers/2384466591/进行了演示.

6.使用position: 'absolute'和right: 0在Text:

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

就像在真正的CSS中一样,这需要Text"流出",意味着它的兄弟姐妹将能够重叠它,它的垂直位置将View默认位于顶部(尽管你可以明确地设置距离顶部的距离)View使用topstyle属性).

当然,您想要使用的这些不同方法中的哪一种 - 以及它们之间的选择是否有意义 - 将取决于您的具体情况.

Answer 2

您可以直接指定项目的对齐方式,例如:

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

Answer 3

对我来说,设置alignItems为父母可以做到这一点,例如:

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

Answer 4

你不应该在React Native中使用浮点数.React Native利用flexbox来处理所有这些事情.

在您的情况下,您可能希望容器具有属性

justifyContent: 'flex-end'

关于占据整个空间的文本,再次,你需要看看你的容器.

这是一个关于flexbox真正精彩指南的链接:Flexbox 完整指南

Answer 5

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

flexDirection:如果要水平移动(行)或垂直移动(列)

justifyContent:你想要移动的方向.

Answer 6

在视图样式中使用flex: 1和。alignItems: 'flex-end'确保包含flex: 1. 这是让元素向右浮动的关键