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

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

---

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

这里是React with CSS中的一个示例

CSS

反应

const循环=（{pct，color}）=>{
常量样式={
背景：`线性渐变（透明${100 pct}%，${color}${100 pct}%）`
};
返回
}
ReactDOM.render(
, 
document.getElementById（“根”）
);

演示

---

以下是您在RN中的操作方法，其中有一个关于零食的演示--非常简单，只是带有样式的基本

。如果你想要这个动画，它同样容易，让我知道，并提出另一个主题，我会张贴动画版本那里

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'
  }
});

import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet}；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”
},
圆圈：{
宽度：196，
身高：196，
边界半径：196/2，
边界宽度：2，
边框颜色：'#000000'，
溢出：“隐藏”，
},
circleFill：{
背景颜色：“橙色”，
宽度：“100%”，
底部：0，
位置：'绝对'
}
});

Android上的屏幕截图：

---

按css形状、html画布或svg创建形状，并自动增加内部背景值和所需百分比。您可能需要一个基于UIView的本机模块。这是一个很好的问题。你可以写一些关于循环进步的东西：还有一些关于艺术的——这似乎正是我想要的。谢谢！我只是对黄色的部分有一个问题：它没有切圆的形状，所以我在底部有一个圆形和一个黄色的矩形。你知道为什么吗？@donzmat是的，这是安卓系统中的一个bug，

overflow:“hidden”

不起作用。我想它是在RN 0.51中修复的-所以你必须升级。好的，非常感谢你，诺伊蒂达特。我一升级就接受答案。@donzmat当然可以，如果你想让填充动画，请告诉我，这将是一个有趣的问题。@Noitidart，真的谢谢你，太棒了，如果我能在RNHey中像你一样棒的话！谢谢你的这种方法，它对我有用。我想知道你对我如何最好地制作圆形填充动画有何见解？@sadbonesmone你无法用CSS制作线性渐变动画。但是使用一些CSS技巧，您仍然可以使用CSS动画。

const Circle = ({pct, color}) => {
  const style = {
    background: `linear-gradient(transparent ${100-pct}%, ${color} ${100-pct}%)`
  };
  return <div className="circle" style={style}></div>
}

ReactDOM.render(
  <Circle pct={25} color={'orange'}/>, 
  document.getElementById("root")
);

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'
  }
});