如何在 React Native 中正确旋转和翻译文本 90 度？

Posted 2023-03-17

【中文标题】如何在 React Native 中正确旋转和翻译文本 90 度？

【英文标题】：How to rotate and translate the Text 90 degree correctly in React Native?

【发布时间】：2021-11-19 17:16:31

【问题描述】：

我正在尝试实现此布局

这是我的视图代码sn-p

<View style=[
    flexDirection: 'row',
    backgroundColor: 'white', 
    borderRadius: 8
]>

    <Text style=
        color: 'white',
        backgroundColor: 'red',
        paddingStart: 12,
        paddingEnd: 12,
        transform: [
             rotate: '-90deg' ,
        ]

    >`Sample Text`</Text>

    <View >

        <Text>Right Content will be here</Text>
    </View>
</View>

输出

我当前实现的问题是

旋转的视图未定位在定位 容器视图的高度不受旋转视图的宽度或高度的影响

如何以一种可以调整字体大小可访问性设置的方式修复它？

【参考方案1】：

您可以使用转换。

https://facebook.github.io/react-native/docs/transforms.html#proptypes

myStyle: 
    transform: [ rotate: '90deg']

【讨论】：

感谢您的回答。好吧，我已经在我现有的代码中使用了它。

【参考方案2】：

通过很少的研究，我已经实现了我的目标。我根据旋转文本的高度和宽度来操作文本容器的 x、y 位置

解决方案

function MyComponent() 

    const [height, setHeight] = React.useState(0)
    const [width, setWidth] = React.useState(0)

    return (
        <View style= marginTop: 300 >


            <View style=[
                flexDirection: 'row',
                backgroundColor: 'white',
                marginStart: 16,
                marginEnd: 16,
                borderRadius: 8,
                overflow: 'hidden',
                minHeight: width,
            ]>

                <View style=
                    backgroundColor: 'yellow',
                    transform: [
                         translateX: -(width / 2 - height / 2) * 2 
                    ]
                >
                    <Text
                        style=
                            color: 'white',
                            backgroundColor: 'red',
                            paddingStart: 12,
                            paddingEnd: 12,
                            transform: [
                                 rotate: '-90deg' ,
                                 translateY: (width / 2 - height / 2) ,
                                 translateX: -(width / 2 - height / 2) 
                            ]

                        
                        onLayout=(e) => 
                            setHeight(e.nativeEvent.layout.height)
                            setWidth(e.nativeEvent.layout.width)
                        
                    >`Sample Text`</Text>
                </View>

                <View style=
                    backgroundColor: 'yellow',
                    width: '100%',
                    justifyContent: 'center',
                    alignItems: 'center',
                    transform: [
                         translateX: -(width / 2 - height / 2) * 2 
                    ]
                >

                    <Text>Right Content will be here</Text>
                </View>
            </View>
        </ View>
    )

输出