react-native - React Native 上的垂直文本样式

Question

我是 react-native 的新手，并尝试按如下方式设置页面样式，特别是播放器的名称和编号：

但是，无论我尝试做什么，我似乎都无法让它与垂直文本一起使用。我目前的结果如下：

我的代码如下：

       <View style = {styles.namenumcontain}>
          <View style={styles.numbercontainer}>
            <Text style={styles.number}>{this.state.number}</Text>
          </View>
          <View style={styles.namecontainer}>
            <Text style = {styles.horizontalLastName}>{this.state.l_name.toUpperCase()}</Text>
          </View>
        </View>

  number: {
    fontFamily: 'Champion',
    fontSize: 200,
    color: Colors.NMUYellow,
    opacity: 0.3,
  },
  horizontalLastName: {
    color: 'white',
    fontFamily: 'BebasNeue-Bold',
    fontSize: 70,
    transform: [{ rotate: '-90deg'}],
    opacity: 0.3,
    width: 200,
    textAlign: 'center'
  },
  namecontainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  numbercontainer: {
    flex: 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  namenumcontain: {
    flexDirection: 'row',
    width: 155,
    height: 200,
  }

我真的希望能够解决这个问题（如果它可以对不同的名称和数字有所响应，但我现在迫切需要任何东西，那将是最好的）。有什么方法可以正确地设置这个样式吗？

Answer 1

您可以使用 旋转文本transform rotate。这是解决此问题的方法之一..

<Text style={{transform: [{rotate: '-90deg'}]}>
     name
</Text>