极客笔记在Snack中使用SVG圆形
有时候，在应用程序中需要绘制基本形状，如线条、矩形、圆等。为此，可以使用’react-native-svg’中的Svg。本文展示了React Native和JavaScript代码的四个不同示例，其中第一个示例使用’react-native-svg’组件“Svg”和“Circle”来绘制圆形，并对其进行样式化和显示。第二个示例以同心圆的形式绘制了不同样式的圆形。第三个示例展示了如何创建一个可点击的圆形。点击后，将显示一个简单的警告消息。第四个示例展示了如何使部分圆圈在屏幕上显示，如果不需要完整的圆形。
步骤1
步骤1 - 从’react-native’中导入View、Text，以及从’react-native-svg’中导入Circle和Svg。
步骤2 - 创建App.js并编写绘制圆形的代码。
步骤3 - 设置cx、cy、r、fill、stroke、strokeWidth、strokeDasharray等值。
步骤4 - 在线上或在个人移动设备上查看结果。
示例1：使用’react-native-svg’创建具有不同样式的圆形
项目中使用的重要文件是
- App.js
App.js： 这是该项目的主要JavaScript文件。
示例
import{Component}from'react';
import{View,Text}from'react-native';
import{Circle,Svg}from'react-native-svg';
exportdefaultclassStyledCircles_SVGExampleextendsComponent{
render(){
return(
<Viewstyle={{flex:1,alignItems:"center",backgroundColor:'#000'}}>
<Textstyle={{color:"red",marginTop:60,fontSize:20}}>ShowingCircleStyles</Text>
<Svgstyle={{alignItems:"center",justifyContent:"center"}}>
<Circle
fill="#e37448"
cx="50%"
cy="50%"
r="50"
/>
</Svg>
<Svgstyle={{alignItems:"center",justifyContent:"center"}}>
<Circle
cx="50%"
cy="50%"
r="60"
fill="none"
stroke="#ffaa00"
strokeWidth={2}
strokeLinecap="round"
strokeDasharray="412"
/>
</Svg>
<Svgstyle={{alignItems:"center",justifyContent:"center",marginTop:20}}>
<Circle
cx="50%"
cy="50%"
r="70"
fill="#faf"
stroke="#00ffff"
strokeWidth={11}
strokeDasharray="4"
/>
</Svg>
</View>
);
}
}
输出
结果可以在线上查看。
展示不同样式的SVG圆在Web视图中
步骤-2
步骤1 − 从’react-native’导入View和Circle、Svg；
步骤2 − 创建App.js并编写绘制圆的代码。
步骤3 − 在做圆时，保持相同的cx、cy值，改变r。改变fill、stroke、strokeWidth、strokeDasharray等是可选的。
步骤4 − 在线或在个人移动设备上查看结果。
示例2：创建具有不同样式的相同中心圆
项目中使用的重要文件如下
- App.js
App.js: 这是该项目的主要JavaScript文件。
示例
import {Component} from 'react';
import { View} from 'react-native';
import {Circle, Svg} from 'react-native-svg';
export default class manyCircles_SVGExample extends Component {
render() {
return (
<View style={{flex:1, padding:10}}>
<Svg height="300" width="300" >
<Circle cx="50%" cy="50%" r="10%" fill="none" stroke="#fa0" strokeWidth={3} strokeDasharray="5" />
<Circle cx="50%" cy="50%" r="20%" fill="none" stroke="#f00" strokeWidth={7} strokeDasharray="4" />
<Circle cx="50%" cy="50%" r="25%" fill="none" stroke="#0ff" strokeWidth={2} strokeDasharray="4" />
<Circle cx="50%" cy="50%" r="30%" fill="none" stroke="#f00" strokeWidth={3} strokeDasharray="3" />
<Circle cx="50%" cy="50%" r="35%" fill="none" stroke="#ff0" strokeWidth={4} strokeDasharray="3" />
<Circle cx="50%" cy="50%" r="40%" fill="none" stroke="#0f0" strokeWidth={5} strokeDasharray="2" />
<Circle cx="50%" cy="50%" r="45%" fill="none" stroke="#0ff" strokeWidth={6} strokeDasharray="2" />
<Circle cx="50%" cy="50%" r="50%" fill="none" stroke="#000" strokeWidth={1} strokeDasharray="1" />
</Svg>
</View>
);
}
}
输出
结果可以在线查看。这里显示的是IOS视图。
使用IOS模拟器显示相同的中心圆。
步骤-3
第1步 - 从 ‘react-native’ 导入 View、TouchableOpacity、Text 和 Circle、Svg 组件；
第2步 - 创建 App.js 文件并编写绘制圆的代码；
第3步 - 在 TouchableOpacity 组件内部创建 Svg 和 Circle 标签，使圆可点击；
第4步 - 检查结果；
示例3：制作可点击的圆
项目中使用的重要文件是
- App.js
App.js：此项目的主要JavaScript文件。
示例
import{Component}from'react';
import{View,TouchableOpacity,Text}from'react-native';
import{Circle,Svg}from'react-native-svg';
exportdefaultclassClickableCircles_SVGExampleextendsComponent{
render(){
return(
<Viewstyle={{flex:1,alignItems:"center",backgroundColor:'#000'}}>
<Textstyle={{color:"red",marginTop:60,fontSize:20}}>PresstheCircleToseetheMessage</Text>
<TouchableOpacitystyle={{marginTop:30,marginLeft:200}}onPress={()=>alert("SVGCircleExample")}>
<Svgstyle={{alignItems:"center",justifyContent:"center"}}>
<Circle
fill="#e37448"
cx="50"
cy="50"
r="50"
/>
</Svg>
</TouchableOpacity>
</View>
);
}
}
输出
可以在网上查看结果。
在Web视图中点击圆后显示警报消息
步骤-4
步骤1-从’react-native’导入View和Circle, Svg从’react-native-svg’；
步骤2-创建App.js并编写绘制圆的代码；
步骤3-设置Svg的宽度和高度以及圆的cx、cy和r来控制圆形部分的显示；
步骤4-检查结果。
示例4：只显示给定圆的部分
该项目中使用的重要文件为
- App.js
App.js：这是该项目的主要JavaScript文件。
示例
import {Component} from 'react';
import { View, Text} from 'react-native';
import {Circle, Svg} from 'react-native-svg';
export default class NotFullCircles_SVGExample extends Component {
render() {
return (
<View style={{flex:1}}>
<Svg height="300" width="200" >
<Circle cx="200" cy="220" r="20%"
fill="red" stroke="#000" strokeWidth={11} strokeDasharray="4" />
</Svg>
<Svg height="100" width="100" >
<Circle cx="0" cy="60" r="90%"
fill="none" stroke="#000" strokeWidth={3} />
</Svg>
</View>
);
}
}
输出
结果可以在线查看。
只显示Web视图中给定的某些圆的部分
这里使用四个不同的示例介绍了在Snack上制作圆的方法。首先给出了对圆进行样式化的方法，然后展示了如何制作同心圆。还展示了如何制作可点击的圆以及指定显示圆的部分的方法。