React native，tranfrom text to rotate I

Question

我想旋转文本，使其看起来像这样，但它不像图像2那样排成一行，我尝试了很多方法来解决它，但都没有奏效

​

​

我可以旋转它，但它不是一行

​

​

我尝试了很多方法，但仍然得到相同的结果，下面是我的代码

 <FlatList
    data={this.state.coupons}
    keyExtractor={(coupons) => coupons.id.toString()
    renderItem={({item}) => (
        <View style={styles.couponContainer}>
          <View
            style={{
            width: moderateScale(56),
                    backgroundColor: item.colors,
           }}>
           <Text
              style={{
                     ...commonStyles.fontSize16Med,
                      color: colors.white,
                      transform: [{rotate: '270deg'}],
                      marginTop: moderateScaleVertical(20),
                      height: 56,
            }}>
            {strings.DISCOUNT}
            </Text>
            <View style={styles.circle}></View>
            </View>
             <View>
              <View style={{flexDirection: 'row'}}>
               <Image
                source={item.icon}
                style={{
                        marginLeft: moderateScale(16),
                        marginTop: moderateScale(16),
                      }}
                />
           <Text
             style={{
                        ...commonStyles.fontsize14,
                        color: colors.blackM,
                        marginLeft: moderateScale(10),
                        marginTop: moderateScaleVertical(20),
                        marginRight: moderateScale(115),
                }}>
                 {item.text}
                </Text>
                  </View>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}>
                    <View>
                      <Text
                        style={{
                          ...commonStyles.fontSize14Med,
                          color: colors.blackM,
                          marginLeft: moderateScale(16),
                          marginTop: moderateScaleVertical(25),
                        }}>
                        {strings.EXPIRES}
                      </Text>
                      <Text
                        style={{
                          ...commonStyles.fontSize14Bold,
                          marginLeft: moderateScale(16),
                          marginTop: moderateScaleVertical(5),
                          marginBottom: moderateScaleVertical(10),
                        }}>
                        {item.expireDate}
                      </Text>
                    </View>
                    <AppButton
                      color={colors.white}
                      title="Redmee"
                      style={{
                        width: moderateScale(100),
                        height: moderateScaleVertical(30),
                        backgroundColor: colors.primary,
                        marginRight: moderateScale(130),
                        marginTop: moderateScaleVertical(30),
                      }}
                      textStyle={commonStyles.fontSize12}
                    />
                  </View>
                </View>
                <View style={styles.circle2}></View>
              </View>
            )}
          />

有人能告诉我怎么解决这个问题吗？

Answer 1

正如我所看到的，问题是Text和它的包装器(红色矩形)一样长。然后旋转它，但它具有相同的宽度，这就是为什么它会自动包装。您可以将红色矩形的高度设置为该文本组件的宽度。

Answer 2

试试这条路

<View
  style={{
    width: moderateScale(56),
    backgroundColor: colors.red,
    transform: [{ rotate: "270deg" }], // add here
  }}
>
  ...
</View>