从底部到顶部逐渐填充圆圈

Question

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

有什么东西已经存在吗？我该怎么开始呢？

Answer 1

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

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屏幕截图: