在 react-native 中垂直居中文本 [英] Center text vertically in react-native

问题描述

如图所示，文字 10 share 位于左上角.我想垂直居中 10 股.我已经尝试了一些方法让它来到黄色视图的中心.

As given in the image, the text 10 shares is on the top left corner. I want to center 10 shares vertically. I have tried some methods to make it come to the center of the yellow view.

render() {
        return (
            <View
                style={styles.grandParentView}>
                <View
                    style={styles.parentView}>
                    <View
                        style={styles.childView}>
                        <Text
                            style={styles.topLeftView}
                            key={'cardTitle'}>
                            {`APPL`}
                        </Text>
                        <Text
                            style={styles.topRightView}
                            key={'cardTitle2'}>
                            {`$1000.00`}
                        </Text>
                    </View>
                    <View
                        style={styles.childView}>
                        <Text
                            style={styles.bottomLeftView}
                            key={'cardTitle3'}>
                            {`10 shares`}
                        </Text>
                        <View
                            style={styles.redView}
                            key={'cardTitle4'}>
                            <Text
                                style={styles.buttonLeftView}
                                key={'cardTitle4'}>
                                {`+$200.00`}
                            </Text>
                            <Text
                                style={styles.buttonRightView}
                                key={'cardTitle4'}>
                                {`+0.02%`}
                            </Text>
                        </View>
                    </View>
                </View>
            </View>
        )
    }


const styles = StyleSheet.create({
  grandParentView: {
        flex: 1,
        marginTop: 60,
        alignSelf: 'baseline',
        flexDirection: 'row'
    },
    newView:{
        flex:1,
        alignContent: 'center'
    },
    parentView: {
        flex: 1,
        marginVertical: 5,
        marginHorizontal: 5,
        alignSelf: 'baseline',
        backgroundColor: 'blue',
        flexDirection: 'column',
    },
    childView: {
        marginVertical: 5,
        marginHorizontal: 5,
        paddingHorizontal: 5,
        backgroundColor: 'green',
        flexDirection: 'row',
        alignContent: 'center',
        justifyContent: 'center'
    },
    topLeftView: {
        flex: 1,
        color: 'black',
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'yellow',
        alignSelf: 'stretch',
        textAlign: 'left',
        paddingLeft: 5
    },
    bottomLeftView: {
        flex: 1,
        color: 'black',
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'yellow',
        height: 50,
        alignSelf: 'stretch',
        textAlign: 'left',
        paddingLeft: 5
    },
    topRightView: {
        flex: 1,
        color: 'black',
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'red',
        alignSelf: 'stretch',
        textAlign: 'right',
        paddingRight: 5
    },
    redView: {
        flex: 1,
        flexDirection: 'row',
        color: 'black',
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'red',
        alignSelf: 'stretch',
        textAlign: 'right',
        paddingRight: 5
    },
    buttonLeftView:{
        flex: 6,
        color: 'black',
        marginVertical: 5,
        height: 50,
        marginHorizontal: 5,
        backgroundColor: 'cyan',
        alignSelf: 'stretch',
        textAlign: 'right',
        paddingRight: 5
    },
    buttonRightView:{
        flex: 4,
        color: 'black',
        height: 50,
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'cyan',
        alignSelf: 'stretch',
        textAlign: 'right',
        paddingRight: 5
    }
});

我想垂直居中底部左项(10 份).现在它显示在视图的左上角.我是 react-native 的新手，所以我没有太多使用 flex 和对齐的经验.提前感谢您的帮助.

I want to center the bottomLeft item (10 shares) vertically. Now it is showing top left in the view. I am new to react-native so I don't have much experience using flex and alignment. Thanks for the help in advance.

推荐答案

添加 textAlignVertical 属性并将其设置为 center 并将 textAlign 更改为居中在您的 bottomLeftView 样式中.

add textAlignVertical property and set it to center and change textAlign to center in your bottomLeftView style.

  bottomLeftView: {
    flex: 1,
    color: "black",
    marginVertical: 5,
    marginHorizontal: 5,
    backgroundColor: "yellow",
    height: 50,
    alignSelf: "stretch",
    textAlign: "center",
    paddingLeft: 5,
    textAlignVertical: "center"
  }

这篇关于在 react-native 中垂直居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！