无法在本机反应中获得此布局：居中垂直文本

Question

这是我的问题的后续问题。

我有这个布局，我想把它用作一个更方形的组件。

我正在努力尝试在 react native 中使用 css 创建此布局。 有人能帮我吗？我真的只需要在左侧居中文本的样式。 感谢您的帮助。

type TeamsProps = {
    name: string,    
}

const TeamCard = (props: TeamsProps) => {
    const [showOptions, setShowOptions] = useState<Boolean>(false)

    const toggleOptions = () => {
        setShowOptions(!showOptions)
    }

    return (
        <View style={[styles.container, { height: (Dimensions.get("window").width - 3 * 15) / 2 }]}>
            <TouchableOpacity onLongPress={toggleOptions} style={styles.card}>
                <View style={styles.nameFlag}>
                    <Text style={styles.name}>{props.name}</Text>
                </View>
                <View style={styles.member}>                    
                </View>
            </TouchableOpacity>
            { showOptions ?
                <TouchableOpacity onPress={toggleOptions} style={styles.options}>
                    <TextInput style={styles.input} value="Team Name"></TextInput>
                    <View style={styles.buttons}>
                        <TouchableOpacity style={[styles.button, styles.delete]}>
                            <Delete style={{ fontSize: 20, color: "white", margin: "auto" }} />
                        </TouchableOpacity>
                        <TouchableOpacity style={[styles.button, styles.confirm]}>
                            <Check style={{ fontSize: 20, color: "white", margin: "auto" }} />
                        </TouchableOpacity>
                    </View>
                </TouchableOpacity>
                : <></>
            }
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flexBasis: "calc(50% - 7.5px)"
    },
    card: {
        backgroundColor: constants.mainColor,
        borderRadius: 15,
        shadowOpacity: 0.6,
        shadowRadius: 10,
        flex: 1,
        flexDirection: "row",
        alignItems: "center"
    },
    nameFlag: {
        backgroundColor: constants.mainColorLight,
        height: "calc(100% - 30px)",
        width: "15%",
        marginVertical: 15,
        borderTopRightRadius: 30,
        borderBottomRightRadius: 30,
        justifyContent: "center"
    },
    name: {
        position: "absolute",
        // TODO: translateX needs to use -50%, translateY needs to use 50% of parent width
        transform: [{ rotate: "-90deg" }, { translateX: -33 }, { translateY: 13 }],
        transformOrigin: "left",
        width: "max-content",
        fontFamily: constants.fontFamilyHeader,
        fontSize: constants.fontSizeHeader
    },
    member: {
        backgroundColor: constants.mainColorLight,
        height: "calc(100% - 30px)",
        width: "calc(85% - 30px)",
        margin: 15,
        borderRadius: 30,
        padding: 15,
        flex: 1,
        flexDirection: "row",
        flexWrap: "wrap",
        gap: 15,
        justifyContent: "space-around",
        alignItems: "center"
    },
    options: {
        backgroundColor: constants.shadowColor,
        position: "absolute",
        top: 0,
        left: 0,
        zIndex: 100,
        width: "100%",
        height: "100%",
        borderRadius: 15,
        padding: 15,
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        gap: 25
    },
    input: {
        backgroundColor: "white",
        width: "100%",
        borderRadius: 50,
        padding: 5,
        fontFamily: constants.fontFamilySubheader,
        fontSize: constants.fontSizeHeader,
        textAlign: "center"
    },
    buttons: {
        flexDirection: "row",
        gap: 25
    },
    button: {
        borderRadius: 50,
        width: 40,
        height: 40
    },
    delete: {
        backgroundColor: constants.alertColor
    },
    confirm: {
        backgroundColor: constants.accentColor
    }
})

如果文字变长，就会出现奇怪的变化@Hammad Hassan

Answer 1

试用此代码并告诉我

 type CardProps= {
            name: string
            }
            
            const Card = (props: CardProps) => {
                return (
                    <View style={styles.container}>
                        <View style={styles.nameFlag}>
                            <Text style={styles.name}>{props.name}</Text>
                        </View>
                        <View style={styles.main}>
            
                        </View>
                    </View>
                )
            }
            
            const styles = StyleSheet.create({
                container: {
                    backgroundColor: constants.mainColor,
                    flex: 1,
                    flexDirection: "row"
                },
                nameFlag: {
                    backgroundColor: constants.mainColorLight,
                    height: "95%",
                    width: "15%",
                    marginVertical: "5%",
                    borderTopRightRadius: 50,
                    borderBottomRightRadius: 50,
                    justifyContent: "center"
                },
                name: {           
                    transform: [{ rotate: "-90deg" }, { translateY: -12 }],
                    fontFamily: constants.fontFamily,
                    fontSize: constants.fonzSizeHeader,
        textAlign: 'center',
        marginRight: 'auto',
        marginLeft: 'auto',
marginTop: 'auto',
marginBottom: 'auto'
                },
                main: {
                    backgroundColor: constants.mainColorLight,
                    height: "95%",
                    width: "75%",
                    margin: "5%",
                    borderRadius: 50
                }
            })
            
        export { Card }