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

Question

我正在尝试实现这个布局

这是我的视图代码片段

<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>

输出

我目前实现的问题是

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

如何以适应字体大小辅助功能设置的方式修复它？

Answer 1

您可以使用转换。

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

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

Answer 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>
    )
}

输出