react-native：borderRadiusがコンポーネントを正しくフレーム化しない

Question

borderRadiusスタイル属性はコンポーネントの境界を正しく変更しません。

赤い背景に緑色の円が表示されると予想されます。代わりに、私はこれを見る。

class Healthie extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.button} /> 
     </View> 
    ); 
    } 
}; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'red', 
    }, 
    button: { 
    backgroundColor: 'green', 
    borderRadius: 50, 
    width: 100, 
    height: 100, 
    textAlign: 'center' 
    } 
}); 

反応し、ネイティブバージョン：0.17.0を。

Answer 1

あなたが探しているものを得るには、別のビューの中にテキストボックスをラップする必要があります。 borderRadiusが変更されたときに表示するには、別のBG色にデフォルト設定はありません。

<View style={styles.container}> 
    <View style={styles.button}> 
    <Text style={{ backgroundColor: 'transparent' }}>Text</Text> 
    </View> 
</View> 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'red', 
    }, 
    button: { 
    backgroundColor: 'green', 
    borderRadius: 50, 
    width: 100, 
    height: 100, 
    textAlign: 'center', 
    flexDirection:'row', 
    alignItems:'center', 
    justifyContent:'center' 
    } 
}); 

はthisデモをご覧ください。

Answer 2

ビュー内のボタンやテキストをラップする必要はありません、ちょうどあなたのスタイルにこれを入れては

overflow: hidden 

それが働いた