Я пытаюсь реализовать этот макет

Вот фрагмент кода моего представления

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

Выход

Проблема моей нынешней реализации заключается в следующем

• Повернутый вид не расположен в положении
• Высота представления контейнера не зависит от ширины или высоты повернутого представления

Как я могу исправить это таким образом, чтобы он мог адаптировать параметры специальных возможностей размера шрифта?

Вы можете использовать трансформацию.

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

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

Что ж, проведя несколько исследований, я достиг своей цели. Где я манипулирую положением 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>
    )
}
 

Выход