你怎么能漂浮：就在这里？

Question

例如，我有一个元素要向右浮动

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

如何将Text浮动/对齐到右侧？还有，为什么Text占用了View的全部空间，而不仅仅是Hello的空间？

Answer 1

对我来说，将对齐项设置为父项可以做到这一点，比如：

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

Answer 2

可以直接指定项目的对齐方式，例如：

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

Answer 3

为什么文本占据了视图的全部空间，而不仅仅是“Hello”的空间？

因为视图是一个flex容器，默认情况下它有flexDirection:“column”和alignItems:“stretch”，这意味着它的子项应该伸展以填充其宽度。

（请注意，根据文档，React Native中的所有组件默认情况下都是display:'flex'，并且display:'inline'根本不存在。这样，React Native中视图中的文本的默认行为与div中的span的默认行为不同网络；在后一种情况下，span不会填充div的宽度，因为span默认为内联元素。React Native中没有这样的概念。）

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

React Native中不存在浮动属性，但是有很多选项可供您使用（行为略有不同），可以让您对文本进行右对齐。以下是我能想到的：

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

（这种方法不会改变文本填充视图整个宽度的事实；它只是将文本中的文本正确对齐）

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

这将Text元素缩小到容纳其内容所需的大小，并将其放在View的交叉方向（默认情况下为水平方向）的末尾。

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

这相当于在所有视图的子视图上设置alignSelf:“flex end”。

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

flexDirection：'row'将布局的主要方向设置为水平而不是垂直；理由内容就像对齐项一样，但是控制在主要方向上的对齐而不是交叉方向。

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

这种方法在web和真实CSS的上下文中得到了演示，https://stackoverflow.com/a/34063808/1709587.

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

像在真正的CSS中一样，这将使Text脱离流，这意味着它的兄弟姐妹将能够重叠它，并且默认情况下，它的垂直位置将位于View的顶部（尽管您可以显式地设置距离使用top样式属性的View的顶部）。

当然，你想使用哪种方法——以及它们之间的选择是否重要——将取决于你的具体情况。