四等分圆环
效果:
思路:
先用四个View画一个“田”,最外层View使用border-radius:50%,overflow: ‘hidden’,将超出部分隐藏掉,最后通过transform偏移45°得到想要的效果,圆环可以最后定位一个小圆到中间来实现。
代码:
import React, {
Component } from 'react';
import PropTypes, {
string } from 'prop-types';
import {
View, TouchableOpacity, Image, Text } from 'react-native';
import {
convertX } from '../../utils';
export default class Index extends Component {
static propTypes = {
};
static defaultProps = {
};
state = {
flag: 1,
};
pressBtn = flag => {
this.setState({
flag });
};
render() {
const {
flag } = this.state;
return (
<View style={
{
justifyContent: 'center', alignItems: 'center' }}>
<Text style={
{
fontSize: convertX(30), color: '#000' }}>
{
`当前选中了${
flag}`}
</Text>
<View
style={
{
width: 180,
height: 180,
borderRadius: