如何在React Native Art中使用线性质量

Question

我想使用React Antive Art创建一些动画SVG图。我的图需要一个线性梯度，我看到React Art Art似乎已经实现了React Art，但我不知道如何使用它。

有人知道或可以通过在此处查看JavaScript来https://github.com/facebook/react-native/blob/master/master/libraries/art/reactnativeart.js

不幸的是，我对JavaScript不太好。

Answer 1

这是React-Native Art模块LinearGradient方法用法的DOC。

afaik，它与Android平台有一些偶数，这是问题所在，您可以使用ProductPains进行跟踪。

Answer 2

我凭借这篇文章

弄清楚了

您可以这样声明线性级别：

  let colors = [ "red", "green",  "blue", ];
  let linearGradient = new LinearGradient(colors, 0, 20, 0, 280);

然后以您的形状使用它：

<Shape d={path} fill={linearGradient} />

不幸的是，似乎没有支持偏移％的支持。

Answer 3

就像Hylle指出的那样，我无法像iOS一样在Android中获得百分比。所有的颜色都均匀间隔。但这是一个对我有用的技巧：

let iosColors = { '.33': '#000', '.66': '#FFF' };
let androidColors = [ '#000', '#000', '#FFF', '#FFF' ];

或一个更复杂的示例：

let iosColors = { '.2': '#000', '.8': '#FFF' };
let androidColors = [ '#000', '#000', '#555', '#AAA', '#FFF', '#FFF' ];

基本上，如果您具有足够简单的固定梯度值，则可以"预先计算"均匀间隔的值，您需要在Android上获得相同的百分比偏移效果。