你不应该在React Native中使用浮动。React Native利用flexbox来处理所有这些事情。

在本例中，您可能希望容器具有属性

justifyContent: 'flex-end'

关于文字占据整个空间，你需要看一下你的容器。

这里有一个链接到非常棒的flexbox指南:一个完整的flexbox指南

对我来说，将alignItems设置为父类是可行的，比如:

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

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

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

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

flexDirection:如果你想水平移动(行)或垂直移动(列)

内容:你想要移动的方向。

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

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

(注意，根据文档，React Native中的所有组件默认都是display: 'flex'，而display: 'inline'根本不存在。通过这种方式，在React Native中一个视图中的文本的默认行为不同于web上一个div中的span的默认行为;在后一种情况下，span不会填充div的宽度，因为span默认是内联元素。React Native中没有这样的概念。)

如何将文本浮动/对齐到右边?

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

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

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

(这种方法不会改变文本填充整个视图宽度的事实;它只是正确对齐文本中的文本。)

2. 在文本上使用alignSelf: 'flex-end'

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

这将把Text元素缩小到容纳其内容所需的大小，并将其放在视图的交叉方向(默认情况下为水平方向)的末端。

3.在视图上使用alignItems: 'flex-end'

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

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

4. 在视图上使用flexDirection: 'row'和justifyContent: 'flex-end'

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

'row'设置布局的主要方向为水平而不是垂直;jusycontent就像alignItems一样，但是控制的是主方向而不是交叉方向的对齐。

5. 在视图中使用flexDirection: 'row'，在文本中使用marginLeft: 'auto'

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

这种方法在web和真实CSS的上下文中得到了演示，请访问https://stackoverflow.com/a/34063808/1709587。

6. 在文本上使用position: 'absolute'和right: 0

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

就像在真正的CSS中一样，这使文本“脱离流”，这意味着它的兄弟姐妹将能够重叠它，并且默认情况下它的垂直位置将位于视图的顶部(尽管你可以使用top style属性显式地设置与视图顶部的距离)。

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

你可以在react native中使用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>

详情请访问:https://facebook.github.io/react-native/docs/flexbox.html#flex-direction

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

在视图样式中使用flex: 1和alignItems: 'flex-end'。确保包含flex:这是使元素正确浮动的关键

const styles = StyleSheet.create({ flowRight: { flex: 1、 justifyContent:“结束”, alignContent:“结束”, }， })；

然后调用样式。正合你的风格

你可以用alignSelf: 'flex-end'设置文本样式:

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD", alignSelf: 'flex-end'}}>Hello</Text>
</View>