【问题标题】：How to rotate and translate the Text 90 degree correctly in React Native?如何在 React Native 中正确旋转和翻译文本 90 度？
【发布时间】：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>

输出

我当前实现的问题是

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

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

【问题讨论】：

标签： react-native layout view styles

【解决方案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>
    )
}

输出

【讨论】：