为什么文本占据了视图的全部空间，而不是只占“Hello”的空间？
因为View是一个Flex容器，默认情况下具有flexDirection: 'column'和alignItems: 'stretch'，这意味着它的子项应该伸展以填充它的宽度。
(Note根据文档，React Native中的 * 所有 * 组件默认为display: 'flex'，而display: 'inline'根本不存在。这样，React Native中View中Text的默认行为与Web上div中span的默认行为不同;在后一种情况下，span * 不会 * 填充div的宽度，因为span默认为内联元素（React Native中没有这种概念）。
如何使文本向右浮动/对齐？
React Native中没有float属性，但是有很多选项（行为略有不同）可以让你右对齐文本。

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

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

(This该方法不改变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>

这种方法在https://stackoverflow.com/a/34063808/1709587的Web和真实的的CSS环境中进行了演示。

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

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

就像在真实的的CSS中一样，这会使Text“脱离流”，这意味着它的兄弟可以重叠它，并且默认情况下它的垂直位置将位于View的顶部（尽管您可以使用top样式属性显式设置与View顶部的距离）。
当然，你想使用这些方法中的哪一种--以及它们之间的选择是否重要--将取决于你的具体情况。

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

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

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

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

你不应该在ReactNative中使用浮点数。ReactNative利用Flexbox来处理所有这些东西。
在本例中，您可能希望容器具有属性

justifyContent: 'flex-end'

关于文本占据整个空间的问题，你需要再次查看容器。
这里是一个链接到真正伟大的指南flexbox：A Complete Guide to Flexbox

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

flexDirection：如果要水平（行）或垂直（列）移动
justifyContent：要移动的方向。

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

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

您可以在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

创建（{ flowRight：{ flex：1，对齐内容：'end'，对齐内容：'结束'、}、}）;
然后调用styles.flowRight在您的样式中