React Native中如何正确将文本旋转90度并适配字号无障碍设置

预期布局 #

当前错误效果 #

问题根因 #

React Native 中的 transform 属于视觉变换，不会修改元素在布局流中的原始占位尺寸，直接对文本做-90度旋转后：

• 文本视觉上变为纵向，但布局占位还是横向的宽高，导致父容器高度计算错误
• 旋转默认以元素中心为原点，没有做位置修正就会出现定位偏移

修复后的完整代码 #

import { useState, useCallback } from 'react';
import { View, Text, LayoutChangeEvent } from 'react-native';

export default function VerticalLabelLayout() {
  // 动态存储纵向标签的宽度（即原文本旋转后的高度）
  const [labelWidth, setLabelWidth] = useState(0);

  // 测量文本原始尺寸，计算旋转后需要的容器宽度
  const handleTextLayout = useCallback((e: LayoutChangeEvent) => {
    const { height } = e.nativeEvent.layout;
    setLabelWidth(height);
  }, []);

  return (
    <View style={[{
      flexDirection: 'row',
      backgroundColor: 'white', 
      borderRadius: 8,
      // 让子元素自动撑满父容器高度
      alignItems: 'stretch',
      overflow: 'hidden' // 避免圆角被标签遮盖
    }]}>
      {/* 左侧纵向标签容器，宽度由文本测量结果动态决定 */}
      <View style={{ width: labelWidth, justifyContent: 'center' }}>
        <Text 
          onLayout={handleTextLayout}
          style={{
            color: 'white',
            backgroundColor: 'red',
            paddingHorizontal: 12,
            paddingVertical: 4, // 增加纵向内边距避免文字贴边
            transform: [
              { rotate: '-90deg' }
            ]
          }}
        >
          Sample Text
        </Text>
      </View>

      {/* 右侧内容区域，自动占满剩余宽度 */}
      <View style={{ flex: 1, padding: 12 }}>
        <Text>Right Content will be here</Text>
        <Text>支持多行内容，父容器高度会自动适配</Text>
      </View>
    </View>
  );
}

改动说明 #

1. 定位修复
   给旋转文本外层加了独立容器，通过justifyContent: 'center'让文本在容器内垂直居中，旋转后自动对齐到左侧区域，不会出现偏移。
2. 容器高度适配
   外层容器加了alignItems: 'stretch'属性，左侧标签容器会自动撑满整个父容器的高度，父容器高度由右侧内容高度或者左侧标签长度自动决定，不需要写死尺寸。
3. 无障碍字体适配
   没有禁用文本的allowFontScaling属性，文本大小会随系统字体大小设置自动缩放；同时通过onLayout动态测量文本原始高度，来设置左侧容器的宽度，字体放大后也不会出现文字截断问题。

内容的提问来源于stack exchange，提问作者Ngima Sherpa