文本未显示在视图内

Question

为什么这个文本没有显示在这个视图中？尝试在圆圈和文字上弯曲。我喜欢在海滩上散步并写一些额外的字符来使这篇文章变得活跃。

import React, {Component} from 'react';
import {View, StyleSheet, Text} from 'react-native';

export default class Interest extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <View style={styles.circle}>
                <Text style={styles.text}>{this.props.title}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    circle: {
        //flex: 1,
        padding: 15,
        borderRadius: 50,
        borderWidth: 1,
        borderColor: 'black',
        height: 10,
        minWidth: 80,
        alignItems: 'center',
        marginBottom: 10
    },
    text: {
        //flex: 0,
        fontFamily: "CircularStd-Book",
        fontSize: 14,
        color: '#2f354b',
        textAlign: 'center'
    }
});

Answer 1

文本被填充和高度隐藏。修正后的CSS如下：

const styles = StyleSheet.create({
    circle: {
        padding: 8,
        borderRadius: 50,
        borderWidth: 1,
        borderColor: 'black',
        height: 35,
        marginBottom: 10,
        alignItems: 'center'
    },
    text: {
        fontFamily: "CircularStd-Book",
        fontSize: 14,
        color: '#2f354b',
        textAlign: 'center'
    }
});