Textverlaufskomponente mit nativem React

Ich suche nach praktischer Richtung beim Erstellen einer <GradientText /> Komponente in "React Native". Ich habe dies für die Web-Seite der Dinge erstellt, mit -webkit-background-clip und CSS linearen Gradienten für Webkit-Browser und standardmäßig auf SVG-Masken für Nicht-Webkit-Browser (die nur zwei Farbstopps unterstützt, die Webkit-Version kann offensichtlich mehr unterstützen) / p>

Ich würde gerne mit React Native lernen, wie man das macht. Hier ist mein done critera:

1. Unterstützen Sie Zwei-Stop-Farbverläufe (mehr als zwei, wenn ich es bekomme).
2. Die Richtung des Verlaufs kann aus beliebigen Winkeln oder einem String wie "nach oben", "nach unten", "nach links" oder "nach rechts" bestehen.
3. Die Farbopazität sollte unterstützt werden, daher kann die Komponente idealerweise eine HEX- oder RGBA-Farbe annehmen.

Die resultierende API sollte etwa so aussehen:

<GradientText colors={['#313182', 'rgba(244,33,233,.5)']} direction='<to top> | <185deg>'>Hello!</GradientText>

Hier wird es für mich schwierig. Ich weiß genug über iOS-Entwicklung, um gefährlich zu sein und nichts über Android-Entwicklung, aber für iOS scheint es, dass das Folgende funktionieren könnte, aber ich bin mir nicht sicher über Best Practices:

1. Subclass die <Text> Komponente von React Native.
2. Erstellen Sie ein UIImage für das Farbverlaufsbild.
3. Verwenden Sie dieses Bild als Musterfüllung für den gerenderten Text.

Etwas wie das .

Dann möchte ich das gleiche tun auf Android mit einem Shader . Auch hier suche ich nach Best Practices, wie das geht.

Schließlich hoffe ich, dass ich im Grunde alle Fähigkeiten der <Text> -Komponente erben kann, und pfeffere nur meine eigenen Zusätze, um die Farbe zu beeinflussen. Ich bin neugierig zu wissen, wie realistisch das wäre und vielleicht ein paar Fallstricke, die ich nicht in Betracht gezogen habe (oder wahrscheinlich nicht kenne).

Ich suche nicht jemanden, der die Arbeit für mich erledigt, aber ich suche nach praktischen Tipps, ein paar Ideen, wo ich nach Informationen suchen kann und wie ich das Projekt richtig strukturiere, damit ich es am Ende schaffen kann Teile es zurück an die Community. Vielen Dank!