react-native - 你怎么能 float : right in React Native?

Question

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

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

Text怎么可能 float /向右对齐？另外，为什么 Text占用 View的全部空间，而不仅仅是“你好”的空间？

Answer 1

why does the Text take up the full space of the View, instead of just the space for "Hello"?

因为 View是一个弹性容器，默认有 flexDirection: 'column' 和 alignItems: 'stretch' ，这意味着它的 child 应该被拉伸(stretch)以填充它的宽度。

(请注意，根据 the docs ，React Native 中的所有组件默认为 display: 'flex' 并且 display: 'inline' 根本不存在。这样， Text 在 React 中的 View 中的默认行为Native 与 Web 上 span 内的 div 的默认行为不同；在后一种情况下，跨度不会填充 div 的宽度，因为 span 是默认的内联元素。 React Native 中没有这样的概念。)

How can the Text be floated / aligned to the right?

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的 children 。

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 的上下文中进行了演示，位于 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 “out of flow”，这意味着它的 sibling 将能够重叠它并且它的垂直位置将在 View 的顶部默认情况下(尽管您可以使用 View 样式属性显式设置与 top 顶部的距离)。

自然，您想使用这些不同方法中的哪一种——以及它们之间的选择是否重要——将取决于您的具体情况。