在本机文本垂直居中

Question

如图中所示，文本 10份额位于左上角。我想垂直放置 10个份额。我尝试了一些方法使它到达黄色视图的中心。

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

我想将bottomLeft项目（10股）垂直居中。现在，它显示在视图的左上方。我是本机反应的新手，所以我没有太多使用flex和alignment的经验。感谢您的提前帮助。

Answer 1

只需以bottomLeftView样式添加 textAlignVerticle 属性并将其设置为 center

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

Answer 2

在您的{{1}中添加 textAlignVerticle 属性并将其设置为 center 并将 textAlign 更改为 center }样式。

bottomLeftView