React Nativeでの円形のボーダーラジウスの設定方法

スタイルシートを使用する方法:

import React from 'react';
import { View, StyleSheet } from 'react-native';
const CircleView = () => {
 return (
   <View style={styles.circle} />
 );
};
const styles = StyleSheet.create({
 circle: {
   width: 100,
   height: 100,
   borderRadius: 50,
   backgroundColor: 'red',
 },
});
export default CircleView;

上記の例では、スタイルシートのborderRadiusプロパティを半径の値で設定することで、ビューを円形にします。幅と高さは同じ値を設定し、borderRadiusは幅の半分に設定することで円形になります。

スタイルオブジェクト内で直接ボーダーラジウスを設定する方法:

import React from 'react';
import { View } from 'react-native';
const CircleView = () => {
 return (
   <View style={circleStyle} />
 );
};
const circleStyle = {
 width: 100,
 height: 100,
 borderRadius: 50,
 backgroundColor: 'red',
};
export default CircleView;

上記の例では、スタイルオブジェクトのborderRadiusプロパティを半径の値で設定することで、ビューを円形にします。

インラインスタイルを使用する方法:

import React from 'react';
import { View } from 'react-native';
const CircleView = () => {
 return (
   <View
     style={{
       width: 100,
       height: 100,
       borderRadius: 50,
       backgroundColor: 'red',
     }}
   />
 );
};
export default CircleView;

上記の例では、ビューのstyleプロパティ内で直接インラインスタイルを指定することで、ビューを円形にします。

これらの方法を使用することで、React Nativeで円形のボーダーラジウスを持つビューを作成することができます。適宜、幅や高さ、背景色などを変更してお使いください。