React Native试图为文本创建边框

Question

我正试图为文本创建一个"框"，意思是一个带边框的边框&文本的背景色(在我的情况下，是单个字符(
但是当我创建一个视图&文本，文本被视图的上限剪切(看看A是如何剪切的(，我不明白为什么
我目前的状况

<View style={styles.container}>
<Text style={styles.letter} > {character} </Text>
</View >
export default EStyleSheet.create({
container: {
justifyContent: 'center', 
alignItems: 'center',
},
letter: {
fontSize: 30,
backgroundColor: 'powderblue',
borderWidth: 2,
textAlign: 'center',
borderColor: 'steelblue',
},
});

谢谢你的帮助。

Answer 1

尝试将margin样式添加到letter和aligSelf: 'center'，但实际上我建议将backgroundColor和borderWidth添加到<View>样式

Answer 2

尝试在视图样式中添加flex:1。

Answer 3

从文本中删除边框样式并将其添加到视图中。

https://snack.expo.io/HJAihyR9B

Answer 4

请像我在下面的代码中所做的那样尝试添加填充：

container: {
justifyContent: 'center', 
alignItems: 'center',
},
letter: {
fontSize: 30,
backgroundColor: 'powderblue',
borderWidth: 2,
textAlign: 'center',
borderColor: 'steelblue',
padding: 10,
},
});