React Nativeのテキストの周りに楕円形の境界線を配置するにはどうすればいいですか？

Question

私は、このテキストとスタイルを持っている：

<Text style={styles.problematicStyle}>{this.props.text}</Text> 

problematicStyle: { 
    borderRadius: 5, 
    borderWidth: 1, 
    borderColor: 'red', 
} 

それは他のテキストと任意のスタイリングなしのビューに包まれています。私は

+----+ 
|text| 
+----+ 

を望む一方で、これは何をするか

んが

+--------------+  
|text   | 
+--------------+ 

（画面全体に広がっ）

である（それは簡単ですので、私は長方形の境界線を "描いた" しかし、私は必要楕円）

スタティックheightを使用しないことをお勧めします。 widthしかし、もし私がすることができます。

Answer 1

は、スタイルプロパティを次の行を追加します。

problematicStyle: { 
    borderRadius: 5, 
    borderWidth: 1, 
    borderColor: 'red', 
    justifyContent: 'center', 
    alignItems: 'center', 
} 

テキストと境界線の間にいくつかのスペースをテキストスタイルにマージンプロパティを追加したい場合。

Answer 2

背景を達成するには、ViewとproblematicStyleが必要です。

<View style={styles.problematicStyle}> 
    <Text>{this.props.text}</Text> 
</View>