您如何浮动：就在React Native中？

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

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

如何Text浮动/向右对齐？另外，为什么Text要占用的全部空间View，而不是只占用“ Hello”的空间？

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

因为View是一个Flex容器，默认情况下具有flexDirection: 'column'和alignItems: 'stretch'，这意味着应将其子级拉伸以填充其宽度。

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

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

该float属性不存在在本地做出反应，但也有负载可用的选项，您（的行为稍有不同），可以让你右对齐文本。这是我能想到的：

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的孩子。

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: 0Text

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

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

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

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

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

对我而言，设置alignItems为父母可以解决问题，例如：

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

您不应在React Native中使用浮点数。React Native利用flexbox处理所有这些东西。

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

justifyContent: 'flex-end'

关于文本占用整个空间的问题，同样，您需要查看容器。

这是有关Flexbox的出色指南的链接：Flexbox 的完整指南

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

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

justifyContent：您要移动的方向。

您可以在flex本机中使用float进行右对齐：

 <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