你怎么能浮动：就在 React Native 中？

Posted 2023-02-16

【中文标题】你怎么能浮动：就在 React Native 中？

【英文标题】：How can you float: right in React Native?

【发布时间】：2015-11-08 21:21:03

【问题描述】：

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

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

Text 如何浮动/向右对齐？还有，为什么Text 占据了View 的全部空间，而不仅仅是“Hello”的空间？

【问题讨论】：

我想知道您是否找到了答案，因为前 3 个答案都说使用 3 种不同的样式属性！ justifyContent、alignItems、alignSelf。我想知道哪个是正确的。

【参考方案1】：

你不应该在 React Native 中使用浮点数。 React Native 利用 flexbox 来处理所有这些内容。

在你的情况下，你可能希望容器有一个属性

justifyContent: 'flex-end'

关于占据整个空间的文本，您需要再次查看您的容器。

这里是 flexbox 上非常棒的指南的链接：A Complete Guide to Flexbox

【参考方案2】：

对我来说，将 alignItems 设置为父母就可以了，比如：

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

【参考方案3】：

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

textright:     
  alignSelf: 'flex-end',  
,

【讨论】：

@goodniceweb 你很困惑； React Native 中 没有 内联元素。唯一有效的display 值是'flex' 和'none'。

如果父级是 flexDirection: 'row' 则不起作用

【参考方案4】：

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

flexDirection：如果要水平（行）或垂直（列）移动

justifyContent: 你要移动的方向。

【讨论】：

有点误导； justifyContent 本身并没有选择方向；它提供了一系列关于如何沿主 flex 方向定位和间隔事物的选项。

【参考方案5】：

为什么 Text 占据了 View 的全部空间，而不仅仅是“Hello”的空间？

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

（注意，根据the docs，React Native 中的所有 组件默认为display: 'flex'，而display: 'inline' 根本不存在。这样，a 的默认行为在 React Native 中 View 内的 Text 与网络上 div 内 span 的默认行为不同；在后一种情况下，跨度将不会填充div 因为 span 默认是内联元素，React Native 中没有这个概念。）

文本如何浮动/向右对齐？

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

1。在Text 元素上使用textAlign: 'right'

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

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

2。在Text 上使用alignSelf: 'flex-end'

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

这会将Text 元素缩小到容纳其内容所需的大小，并将其放在View 的横向（默认为水平方向）的末端。

3。在View 上使用alignItems: 'flex-end'

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

这相当于在所有View 的孩子上设置alignSelf: 'flex-end'。

4。在View 上使用flexDirection: 'row' 和justifyContent: 'flex-end'

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

flexDirection: 'row' 将布局的主方向设置为水平而不是垂直； justifyContent 与 alignItems 类似，但控制主方向而不是交叉方向的对齐方式。

5。在View 上使用flexDirection: 'row'，在Text 上使用marginLeft: 'auto'

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

这种方法在 Web 和真实 CSS 的上下文中进行了演示，地址为 https://***.com/a/34063808/1709587。

6。在Text 上使用position: 'absolute' 和right: 0：

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

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

---

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

【讨论】：

这些解决方案都不起作用。 :( 我的目标是浮动一个标题，然后来自左边的文字会绕过它。像这样 - ***.com/q/19179424/1828637 - 所以我希望这样做：<Text><Text>FLOAT TEXT</Text>multi line text here which wraps around float text。或者同样的，但有这样的图像：@ 987654385@.

感谢@Mark Amery 的回答！我真的很喜欢第五（5）种方法，因为我不喜欢为视图/容器的高度设置一个常数，因为它会自动调整大小。

没有。 4 对我来说是一种享受。我怀疑任何有问题的人都需要查看视图是如何包含的，这可能会影响子元素的弹性布局。

您的回答非常详细且充满了出色的解决方案，以至于在您给出答案 3 年后仍然有效。干得好！

【参考方案6】：

您可以使用 flex 在 react native 中浮动：正确：

 <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

【讨论】：

这只是重复了我已经发布的方法（这是my answer 中的选项 4），我看不到任何附加值。

【参考方案7】：

使用弹性

 <View style= flexDirection: 'row',>
                  <Text style=fontSize: 12, lineHeight: 30, color:'#9394B3' >left</Text>
                  <Text style= flex:1, fontSize: 16, lineHeight: 30, color:'#1D2359', textAlign:'right' >right</Text>
               </View>

【参考方案8】：

您可以使用以下这些组件来向右浮动

alignItems 沿横向对齐子项。例如，如果子元素垂直流动，则 alignItems 控制它们水平对齐的方式。

alignItems: 'flex-end'

justifyContent 使子项在主要方向上对齐。例如，如果孩子是垂直流动的，justifyContent 控制它们垂直对齐的方式。

justifyContent: 'flex-end'

alignSelf 控制孩子在横向上的对齐方式，

alignSelf : 'flex-end'

【参考方案9】：

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

的关键

【讨论】：

这对我有用

【参考方案10】：

由于 react 发生了一些变化，它不再支持 float right 类，而是为此创建了一个变量并需要一个值。 使用 marginLeft : "auto"

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。