如何更改进度条方向

Question

我想使用progressBar，但我想更改其方向。 默认情况下，所有进度条的填充顺序是从左到右。但我想从右到左有一些库，但是它们没有此配置。

例如：

https://github.com/rafaelmotta/react-native-progress-bar-animated

Answer 1

有一个可以尝试的技巧。

您可以将进度条放在“视图”组件中，然后将“视图”旋转到180度。

progressBarContainer: {
   transform: [{ rotate: '180deg'}]
}

Answer 2

我对React Native本身不太熟悉，但是您可能想尝试使用this之类的库，然后使进度条向后退。

例如（伪代码）：

<div id="p1" class="mdl-progress mdl-js-progress"></div>
<script>
  let someNumber = 100
  document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
    someNumber -= 1
    this.MaterialProgress.setProgress(someNumber);
  });
</script>

您可以设置进度条的样式以切换颜色。