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

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

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

你好

---

如何将

文本

浮动/对齐到右侧？另外，为什么

文本

占据了

视图的全部空间，而不仅仅是“Hello”的空间？
您不应该在React Native中使用float。React Native利用flexbox处理所有这些内容

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

justifyContent: 'flex-end'

关于占据整个空间的文本，同样，你需要看看你的容器

这里有一个链接，指向flexbox上的真正伟大的指南：
对于我来说，将
对齐项目
设置到一个家长完成了这个技巧，比如：

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

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

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


一些文本

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

justifyContent
：要移动的方向

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

因为
视图
是一个flex容器，默认情况下具有and，这意味着它的子对象应该伸展以填充其宽度

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

文本如何向右浮动/对齐

React Native中不存在该属性，但您可以使用大量选项（行为稍有不同）来右对齐文本。以下是我可以想到的选项：

1.在
文本
元素上使用
这会将
文本
元素缩小到容纳其内容所需的大小，并将其放置在
视图
的交叉方向（默认为水平方向）的末尾

3.在
视图上使用
flexDirection:“行”
将布局的主方向设置为水平而不是垂直；
justifyContent
与
alignItems
类似，但控制主方向而不是交叉方向的对齐

5.在
视图
和
文本
与真正的CSS一样，这会使
文本
失去流动性，这意味着它的同级可以重叠，并且默认情况下，它的垂直位置将位于
视图
的顶部（尽管可以使用
顶部
样式属性显式设置与
视图
顶部的距离）


当然，您想使用这些方法中的哪一种——以及它们之间的选择是否重要——将取决于您的具体情况。
您可以浮动：在react native using flex中：

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



有关更多详细信息：
使用flex

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


左边
正确的
您可以使用以下组件向右浮动

alignItems在交叉方向上对齐子项。例如，如果子项垂直流动，alignItems控制它们水平对齐的方式

alignItems: 'flex-end'

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

justifyContent: 'flex-end'

alignSelf控制子对象在交叉方向上的对齐方式

alignSelf : 'flex-end'

有点误导；本身不选择方向；它提供了一系列关于沿主flex方向定位和间隔的选项。@goodniceweb您很困惑；React Native中没有内联元素。唯一有效的值是
'flex'
和
'none'
。这些解决方案都不起作用。：（我的目标是浮动一个标题，然后从左边来的文本环绕它。就像这样--所以我希望这样：
float text多行文本环绕float text
。或者像这样的图像：
多行文本环绕float image
。谢谢你的回答@Mark Amery！我真的很高兴。）第五（5）节方法，因为我不喜欢为视图/容器的高度设置一个常数，因为它会自动调整大小。第4项对我来说很有用。我怀疑任何有问题的人都需要看看视图是如何包含的。这可能会影响子元素的flex布局。你的答案非常详细，而且有很多很好的解决方案，它仍然有效，3 y我想知道你是否找到了答案，因为前三个答案都说使用了3种不同的风格属性！
证明内容的合理性
，
对齐项目
，
对齐自我
。我想知道哪一种是正确的。
<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

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

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

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

alignItems: 'flex-end'

justifyContent: 'flex-end'

alignSelf : 'flex-end'