react-native 矢量图标动态背景

问题描述

我正在尝试创建一个组件，其中电池电量（RN 矢量图标）以不同的背景颜色显示。所以对于例如10%、20% 等

我正在使用来自 https://oblador.github.io/react-native-vector-icons/

的以下图标

我如何实现这一目标？

到目前为止我已经创建了以下

<View style={styles.container}>
  <View
    style={styles.iconContainer}>
    <FeatherIcon
      name="battery"
      size={iconSize}
      style={styles.icon}
    >
      </FeatherIcon>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: "center",alignItems: "center",},iconContainer: {
    zIndex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'green',icon: {
    justifyContent: "center",zIndex: 0,});

但我得到的是

这个想法是通过 % 电量的道具，它会显示电池内部的绿色比例。右侧的电池需要在绿色背景之外。

有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dynamic react-native react-native-vector-icons styles stylesheet