从底部到顶部逐渐填充圆

Question

我需要创建一个从底部到顶部逐渐填充的圆形视图（取决于百分比），但我不知道如何实现此结果。

有什么东西存在吗？我怎么能开始做呢？

Answer 1

以下是你在RN中的表现，以及关于小吃的演示 - https://snack.expo.io/@noitsnack/circle-fill - 超级简单，只有基本<View>的造型。如果你想要这个动画，同样容易，让我知道并提出另一个主题，并在那里发布动画版本。

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


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.circle}>
          <View style={[styles.circleFill, { height:'25%' }]} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  circle: {
    width: 196,
    height: 196,
    borderRadius: 196 / 2,
    borderWidth: 2,
    borderColor: '#000000',
    overflow: 'hidden',
  },
  circleFill: {
    backgroundColor: 'orange',
    width: '100%',
    bottom: 0,
    position: 'absolute'
  }
});

Android上的屏幕截图：

Answer 2

这是React with CSS的一个例子。

CSS

var

阵营

.circle {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50%;
}