你怎么能浮动:就在 React Native 中? [英] How can you float: right in React Native?

问题描述

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

I have an element that I want to float right, for example

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

如何让 Text 向右浮动/对齐?另外，为什么 Text 占据了 View 的全部空间，而不仅仅是Hello"的空间?

How can the Text be floated / aligned to the right? Also, why does the Text take up the full space of the View, instead of just the space for "Hello"?

推荐答案

为什么 Text 占据了 View 的全部空间，而不仅仅是Hello"的空间?

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

因为 View 是一个 flex 容器并且默认有 flexDirection: 'column' 和 alignItems: 'stretch'，这意味着它的子项应该被拉伸以填充其宽度.

Because the View is a flex container and by default has flexDirection: 'column' and alignItems: 'stretch', which means that its children should be stretched out to fill its width.

(注意，根据 文档，React Native 中的所有组件默认都是 display: 'flex' 并且 display: 'inline' 根本不存在.以这种方式，React Native 中 View 中 Text 的默认行为与 div 中 span 的默认行为不同> 在网络上；在后一种情况下，span 不会填充 div 的宽度，因为默认情况下 span 是一个内联元素. React Native 中没有这个概念.)

(Note, per the docs, that all components in React Native are display: 'flex' by default and that display: 'inline' does not exist at all. In this way, the default behaviour of a Text within a View in React Native differs from the default behaviour of span within a div on the web; in the latter case, the span would not fill the width of the div because a span is an inline element by default. There is no such concept in React Native.)

如何让文本向右浮动/对齐?

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

float 属性在 React Native 中不存在，但是有许多选项可供您使用(行为略有不同)，可以让您右对齐文本.以下是我能想到的:

The float property doesn't exist in React Native, but there are loads of options available to you (with slightly different behaviours) that will let you right-align your text. Here are the ones I can think of:

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

(这种方法不会改变 Text 填充 View 的整个宽度的事实；它只是将 Text 中的文本右对齐.)

(This approach doesn't change the fact that the Text fills the entire width of the View; it just right-aligns the text within the Text.)

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

这会将 Text 元素缩小到容纳其内容所需的大小，并将其放置在 View.

This shrinks the Text element to the size required to hold its content and puts it at the end of the cross direction (the horizontal direction, by default) of the View.

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

这相当于在所有 View 的子节点上设置 alignSelf: 'flex-end'.

This is equivalent to setting alignSelf: 'flex-end' on all the View's children.

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

flexDirection: 'row' 设置布局的主方向为水平而不是垂直；justifyContent 和 alignItems 一样，但控制的是主方向的对齐而不是横向.

flexDirection: 'row' sets the main direction of layout to be horizontal instead of vertical; justifyContent is just like alignItems, but controls alignment in the main direction instead of the cross direction.

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

在网络和真实 CSS 的上下文中演示了这种方法，位于 https://stackoverflow.com/a/34063808/1709587.

This approach is demonstrated, in the context of the web and real CSS, at https://stackoverflow.com/a/34063808/1709587.

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

就像在真正的 CSS 中一样，这会将 Text 置于流外"，这意味着它的兄弟元素将能够重叠它并且它的垂直位置将位于 View 的顶部 默认情况下(尽管您可以使用 top 样式属性显式设置与 View 顶部的距离).

Like in real CSS, this takes the Text "out of flow", meaning that its siblings will be able to overlap it and its vertical position will be at the top of the View by default (although you can explicitly set a distance from the top of the View using the top style property).

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

Naturally, which of these various approaches you want to use - and whether the choice between them even matters at all - will depend upon your precise circumstances.

这篇关于你怎么能浮动:就在 React Native 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！