如何指定一个元素相对于 React Native 中的窗口进行百分比缩放变换？

Question

例如，我可以通过应用以下公式来实现同样的效果：

const { width } = useWindowDimension();
const porcentage = width * 0.8 (80% of the window);

<ComponentOrElement style={ width: porcentage } />

但是这是基于元素的

width

（或者也是

height

），我想获得相同的但基于缩放变换。例如：

const { width } = useWindowDimension();
const porcentage = width * 0.8 (80% of the window?);

<ComponentOrElement style={ transform: [ { scale: porcentage } ] } />

缩放的范围为

0

到

1

（或更大，但它始终指的是一个因子，而不是像素、dp 等）。

如何在扩展中实现这一目标？

Answer 1

这将缩放并使视图保持在中心：

const { width } = useWindowDimension();    

<ComponentOrElement style={{ width: width, transform: [{ scaleX: 0.8 }] }} />

向右移动：

const scale = .8;

<ComponentOrElement
  style={{
    width: width,
    transform: [{ translateX: width * (1 - scale) * 0.5 }, { scaleX: scale }],
  }}
/>

向左移动：

<ComponentOrElement
  style={{
    width: width,
    transform: [{ translateX: width * (scale - 1) * 0.5 }, { scaleX: scale }],
  }}
/>

但他们会歪曲内容