React Native-将文本与垂直进度条平行对齐

Question

我正在使用react native来构建类似于以下模型的ui。 但是我无法将文本与ProgressIndicator平行对齐（进度条+方形气泡）。即使我通过绝对定位和旋转来调整文本，如果文本太长，则不起作用。 你能指出我正确的方向吗？ 您可以找到小吃here。

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

import ProgressIndicator from './ProgressIndicator';

export default class HomePage extends Component {
  render() {
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <View>
            <ProgressIndicator/>
            <Text style = {styles.textStyle}>Long text</Text>
          </View>
          <View>
            <ProgressIndicator/>
            <Text style = {styles.textStyle}>Short</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  page: {
    backgroundColor : 'white',
    flex : 1,

  },
  container: {
    flexDirection : 'row',
  },
  textStyle : {
    transform: [{ rotate: '-90deg'}],
    backgroundColor : 'green',
    position : 'absolute',
    left : 0,
    bottom : 0,
  },
});

注意： 我还尝试将整个事情水平完成，然后旋转“ -90度”。 这种方法的主要问题是，当旋转原生螺钉时，UI会随角半径和边界厚度变化。实际的ui比上面的模型更完整。