React Native使用轴心点进行转换

Question

我想以Text角度旋转一个组件-90deg.组件应从左角而不是中间旋转.我使用以下代码:

render() {
     return (
            <View style = {{flex : 1}}>
                <View style={styles.sidebar}>
                    <Text style={styles.lblSideBar} numberOfLines = {1} >DUMMY TEXT</Text>
                </View>
            </View>);
}

const styles = StyleSheet.create({
  sidebar : {
    flex : 1,
    flexDirection : 'row',
    alignItems : 'flex-end',
    justifyContent : 'center',
    width : 30,
  },
  lblSideBar : {
      bottom : 20,
      transform : [{rotate : '-90deg'}],
  }
});

我想要20px的底部空间,但是当旋转从中心发生时(默认情况下),文本在旋转后覆盖底部区域.请建议如何实现这一目标？还react-native需要的支持pivotPoint或anchorPoint或transformOrigin因此可以很容易地实现这个属性.

Answer 1

我刚刚做了一个withAnchorPoint函数，使在 react-native 中更容易使用锚点进行转换。https://github.com/sueLan/react-native-anchor-point。

你可以这样使用它：

import { withAnchorPoint } from 'react-native-anchor-point';

getTransform = () => {
    let transform = {
        transform: [{ perspective: 400 }, { rotateX: rotateValue }],
    };
    return withAnchorPoint(transform, { x: 0.5, y: 0 }, { width: CARD_WIDTH, height: CARD_HEIGHT });
};

<Animated.View style={[styles.blockBlue, this.getTransform()]} />

我也为此写了一篇文章。

以下棘手的代码用于设置视图的锚点或称为枢轴点。

1. 在 x 轴、y 轴、z 轴上通过 x、y、z 平移视图
2. 应用轮换
3. 在 x 轴、y 轴、z 轴上通过 -x、-y、-z 将视图向后平移

          translateX: -w / 2
          rotateY
          translateX: w / 2

这意味着将锚点设置为 (0, 0.5)。我们将它应用到这样的变换样式中

   const transform = {
      transform: [
          {translateX: -w / 2}, 
          rotateY, 
          {translateX: w / 2}
      ]
    }
    return (   
        <Animated.View style={transform}></Animated.View>
    )
  }

          translateX: w / 2
          rotateY
          translateX: -w / 2

这意味着将锚点设置为 (1, 0.5)

          translateX: -w / 2
          translateY: -h / 2
          rotateZ
          translateX: w / 2
          translateY: h / 2

这意味着将锚点设置为 (0, 0)

          translateX: w / 2
          translateY: h / 2
          rotateZ
          translateX: -w / 2
          translateX: -h / 2

这意味着将锚点设置为 (1, 1)

在 iOS 中，它被称为锚点。关于锚点

layer.anchorPoint = CGPointMake(0, 0)

在 Android 中，它被称为枢轴点。

  viewToMove.setPivotX(0);
  viewToMove.setPivotY(0);