在 react-native 中垂直居中文本答案

【问题标题】：Center text vertically in react-native在 react-native 中垂直居中文本
【发布时间】：2019-07-12 07:01:02
【问题描述】：

如图所示，文本 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 个共享）垂直居中。现在它显示在视图的左上角。我是 react-native 的新手，所以我没有太多使用弹性和对齐的经验。提前感谢您的帮助。

【问题讨论】：

标签： javascript react-native

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：