如何在 React Native ART 中使用 LinearGradient？答案

【问题标题】：How to use LinearGradient in React Native ART?如何在 React Native ART 中使用 LinearGradient？
【发布时间】：2018-06-27 22:44:41
【问题描述】：

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

不幸的是，我还不太擅长 Javascript。

【问题讨论】：

【解决方案1】：

Here 是 react-native ART 模块LinearGradient 方法使用的文档。

AFAIK，它在 Android 平台上有些问题，here 是问题所在，您可以使用 productpains 进行跟踪。

【讨论】：

【解决方案2】：

感谢this post，我想通了

您可以这样声明 LinearGradient：

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

然后在你的 Shape 中使用它，例如：

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

不幸的是，似乎不支持偏移百分比，例如在 d3js 中。

【讨论】：

【解决方案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 上获得相同百分比偏移效果所需的均匀间隔值。

【讨论】：