React Native TypeScript中transform属性传参错误，正确写法是什么？

在React Native TypeScript项目中使用CSS风格的transform字符串格式会触发类型错误：

React Native: Invalid prop transform of type string supplied, expected an array

详细错误信息如下：

Invariant Violation: Invalid prop `transform` of type `string` supplied to `StyleSheet modalContent`, expected an array.
    StyleSheet modalContent: {
      "transform": "translate(-50%, -50%)",
    }

正确写法说明 #

React Native的transform属性不支持CSS字符串语法，必须传入对象数组，每个变换操作对应一个独立对象，键为变换类型（如translateX/translateY），值为具体偏移量。

实现translate(-50%, -50%)的正确代码 #

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  modalContent: {
    // React Native中百分比需以小数形式传入（0.5对应50%）
    transform: [
      { translateX: -0.5 },
      { translateY: -0.5 }
    ],
    // 搭配绝对定位才能实现居中效果
    position: 'absolute',
    top: '50%',
    left: '50%'
  }
});

额外提示 #

• 若需基于固定像素偏移，直接传入数字即可（例如translateX: -100表示向左偏移100像素）
• 多个变换操作可按执行顺序添加到数组中（如同时平移+旋转），数组顺序即为变换的执行顺序

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