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

Question

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

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

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

Answer 1

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

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

justifyContent: 'flex-end'

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

justifyContent: 你要移动的方向。

Answer 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://stackoverflow.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 顶部的距离。

---

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

Answer 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

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

Answer 8

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

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

alignItems: 'flex-end'

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

justifyContent: 'flex-end'

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

alignSelf : 'flex-end'

Answer 9

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

的关键

Answer 10

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