RN中实现四等分、五等分圆环按钮

最新推荐文章于 2024-06-22 14:34:01 发布

小思思的树洞

最新推荐文章于 2024-06-22 14:34:01 发布

阅读量462

点赞数 1

分类专栏： reactNative 文章标签： react.js javascript react native

本文链接：https://blog.csdn.net/weixin_45672971/article/details/119999146

版权

本文介绍了如何在React Native中创建四等分和五等分的圆环按钮。四等分圆环利用了四个View构成的‘田’形布局，通过border-radius和transform实现。而五等分圆环则采用了图片切换的方式，根据点击位置判断并切换图片，同时处理TouchableOpacity的active状态。

摘要由CSDN通过智能技术生成

四等分圆环

效果：

效果展示

思路：

先用四个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: