React Native 角丸め解説

React Nativeで1つの角だけを丸める方法 (日本語)

React Nativeで1つの角だけを丸めるには、borderRadiusプロパティと、borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius、borderBottomRightRadiusプロパティを使用します。

基本的な方法

<View style={{
  borderRadius: 20, // 全ての角を丸める
  borderTopLeftRadius: 0, // 左上の角を丸めない
}}>
  {/* コンテンツ */}
</View>

この例では、borderRadiusを20に設定して全ての角を丸め、borderTopLeftRadiusを0に設定して左上の角だけを丸めないようにしています。

他の角を丸める場合

同様に、他の角を丸める場合は、対応するプロパティを設定します。

• 右下の角
  borderBottomRightRadius

例: 右下の角だけを丸める

<View style={{
  borderRadius: 20, // 全ての角を丸める
  borderTopLeftRadius: 0,
  borderTopRightRadius: 0,
  borderBottomLeftRadius: 0,
}}>
  {/* コンテンツ */}
</View>

複数の角を丸める場合は、それぞれのプロパティに適切な値を設定します。

たとえば、左上と右下の角だけを丸めるには、以下のようにします。

<View style={{
  borderRadius: 20, // 全ての角を丸める
  borderTopRightRadius: 0,
  borderBottomLeftRadius: 0,
}}>
  {/* コンテンツ */}
</View>

注意事項

• プロパティの値は、ピクセル単位で指定されます。
• borderRadiusは全ての角を丸めるので、特定の角を丸めない場合は、対応するプロパティを設定する必要があります。

<View style={{
  borderRadius: 20, // 全ての角を丸める
  borderTopLeftRadius: 0, // 左上の角を丸めない
}}>
  {/* コンテンツ */}
</View>

<View style={{
  borderRadius: 20, // 全ての角を丸める
  borderTopLeftRadius: 0,
  borderTopRightRadius: 0,
  borderBottomLeftRadius: 0,
}}>
  {/* コンテンツ */}
</View>

<View style={{
  borderRadius: 20, // 全ての角を丸める
  borderTopRightRadius: 0,
  borderBottomLeftRadius: 0,
}}>
  {/* コンテンツ */}
</View>

React Nativeで角を丸めるには、borderRadiusプロパティを使用します。このプロパティは、全ての角を同じ半径で丸めます。

1つの角だけを丸める

CSS Transformを利用する

CSSのtransformプロパティとrotate関数を組み合わせて、特定の角を丸めることもできます。ただし、この方法では、レイアウトの複雑化やパフォーマンスへの影響が考えられるため、慎重に使用してください。

<View style={{
  transform: [
    { rotate: '-45deg' },
    { translateX: -20 }, // 丸めたい角の半径を指定
    { translateY: -20 },
  ],
}}>
  {/* コンテンツ */}
</View>

カスタムコンポーネントを作成する

より柔軟な角丸めを実現したい場合は、カスタムコンポーネントを作成することもできます。これにより、任意の形状やアニメーションを適用することができます。

import React from 'react';
import { View, StyleSheet } from 'react-native';

const RoundedCornerView = ({ style, children }) => {
  return (
    <View style={[styles.container, style]}>
      <View style={styles.roundedCorner}>
        {children}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
  },
  roundedCorner: {
    borderRadius: 20, // 丸めたい角の半径を指定
    transform: [{ rotate: '45deg' }, { translateX: -20 }, { translateY: -20 }],
  },
});

export default RoundedCornerView;

第三者ライブラリを利用する

React Nativeのエコシステムには、角丸めをより簡単に実現するためのサードパーティライブラリが存在します。これらのライブラリは、様々な機能やカスタマイズオプションを提供します。

例

• react-native-clip-path
• react-native-rounded-corners