reactjs - 从下到上逐渐填充一个圆圈

Question

我需要创建一个从下到上逐渐填充的圆形 View (取决于百分比)，但我不知道如何实现这个结果。

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

Answer 1

下面是你在 RN 中的做法，还有一个关于零食的演示 - https://snack.expo.io/@noitsnack/circle-fill - super 简单，基本的<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 屏幕截图: