javascript - 文本未在 View 内显示

Question

为什么这个文本没有显示在这个 View 中？尝试在圆圈和文本上弯曲。我喜欢在海滩上长距离散步并写出额外的字符来获得这篇文章的活跃度。

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