React Native Android端View组件旋转问题：如何设置中心旋转支点？

这个问题我之前踩过坑，确实挺闹心的——iOS默认就把组件中心当旋转支点，但Android偏偏默认用右上角，导致两边旋转效果完全不对。下面给你几个实用的解决方案：

方案一：显式设置transformOrigin（推荐首选） #

React Native 0.60及以上版本已经支持transformOrigin样式属性，直接把它设为center，就能让Android和iOS的旋转支点统一：

<View
  style={{
    width: 100,
    height: 100,
    backgroundColor: '#ff4444',
    transform: [{ rotate: '45deg' }],
    // 关键配置：强制旋转支点为组件中心
    transformOrigin: 'center',
  }}
/>

如果你的RN版本比较老旧，transformOrigin可能不生效，可以试试下面的兼容方案。

方案二：手动通过平移调整位置（兼容旧版本） #

原理很简单：先把组件的中心移到坐标原点，旋转完成后再移回原来的位置，变相实现以中心为支点旋转：

<View
  style={{
    width: 100,
    height: 100,
    backgroundColor: '#ff4444',
    // 步骤拆解：平移到原点 → 旋转 → 平移回原位置
    transform: [
      { translateX: -50 }, // 组件宽度的一半
      { translateY: -50 }, // 组件高度的一半
      { rotate: '45deg' },
      { translateX: 50 },
      { translateY: 50 },
    ],
  }}
/>

要是组件宽高是动态的，可以用useLayoutEffect或者Dimensions获取实际尺寸后再计算偏移量。

方案三：嵌套容器配合居中布局 #

把需要旋转的View放进一个父容器里，父容器设置alignItems: 'center'和justifyContent: 'center'，让子View在父容器里完全居中，这样旋转时的支点自然就是自身中心了：

<View
  style={{
    width: 100,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  }}
>
  <View
    style={{
      width: 100,
      height: 100,
      backgroundColor: '#ff4444',
      transform: [{ rotate: '45deg' }],
    }}
  />
</View>

注意要让父容器的尺寸和子View保持一致，避免出现不必要的布局偏移。

内容的提问来源于stack exchange，提问作者Syed Hassan