web-dev-qa-db-ja.com

1つのコーナーにのみ境界半径を使用する方法（反応ネイティブ）

React Nativeで境界線の半径を1つのコーナーのみに使用する方法は？

モーダルウィンドウがあります

http://f1.s.qip.ru/etSMz5YP.png

丸みのない下隅を見ることができるように、ボタンにbackgroundColorを使用したときに発生します。私はモーダルラッパーに隠されたオーバーフローを設定しようとしていましたが、それは私を助けませんでした。次に、ボタンに境界線の半径を使用します（1コーナーのみ）。

私のコード http://jsbin.com/sexeputuqe/edit?html,css

javascriptreactjsreact-native
58
Maksim

すでに以下を試してみましたか？
-borderBottomLeftRadius：番号
-borderBottomRightRadius：番号
-borderTopLeftRadius：番号
-borderTopRightRadius：番号

また、詳細情報は ビューコンポーネントドキュメント で見つけることができます。

176
Matteo Mazzarolo
  • borderBottomLeftRadius：数値
  • borderBottomRightRadius：数値
  • borderTopLeftRadius：数値
  • borderTopRightRadius：数値

これは私のために働いた。

ありがとう

13
Syn Adhitya

Imageタグの左上隅と左下隅に半径のみが設定されているとします。

<View style={styles.imgBox}>
  <Image source={{ uri: 'your image url' }} style={styles.img} />
</View>

 const styles = EStyleSheet.create({
 imgBox: {
       width: px(72),
       height: px(72),
       borderBottomLeftRadius: 2,
       borderTopLeftRadius: 2,
       overflow: 'hidden',
 },
 img: {
       width: px(72),
       height: px(72),
  },
})

iOSに適しています。

5
Shirly Chen