我可以在不变换旋转的情况下旋转 <Text> 吗？

Question

问题

看起来当我旋转文本或查看 90 度时，它不会旋转元素..所以它只会旋转你看到的东西，但它不会让图形扩展，因为它就像元素仍然存在但不可见。 .

问题

有没有办法旋转元素？也许不使用转换？我点击了所有可能的链接，其中包含关键词“react native”、“transform”和“Rotate”。

transform: [{ rotate: '-90deg'}],

Answer 1

这是一个非常简单的 CSS 问题，这里有一个您可以使用的修补程序。这种方法使用了使用 position: "absolute"

的原则

<View style={styles.container} >
    <View style={styles.rotatedTextContainer>

        <Text style={styles.rotatedText}>Testing</Text>
    </View>

    <View style={styles.graphContainer>
        <Graph style={styles.graph} />
        <Text style={styles.regularText}>Test</Text>
    </View>
</View>

这就是 CSS 样式的样子：

const styles = StyleSheet.create({
    container: {
        width: '100%',
        flexDirection: 'row',
        flex: 1,
    },
    rotatedTextContainer: {
        height: '100%',
        position: 'absolute',
        padding: 5,
        top: 0,
        left: 0
    }
    rotatedText: {
        transform: [{ rotate: '-90deg' }],
    },
    graphContainer: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        marginLeft: 50,  
    },
    graph: {
        width: "100%", 
        height: 300
    },
    regularText: {}
})

这是您需要的 CSS。您可以将其他 css 属性添加到我上面分享的那些。

希望这能解决问题。