Gradient Text Component mit React Native

Question

Ich bin auf der Suche nach praktischer Richtung bei der Erstellung 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, kann die Webkit-Version offensichtlich mehr unterstützen).

Ich würde gerne lernen, wie dies mit React Native zu tun. Hier ist mein done critera:

1. Unterstützung zwei-Stop-Farbverläufe (mehr als zwei, wenn ich es bekommen kann).
2. Die Farbverlaufsrichtung kann aus beliebigen Winkeln oder einer Zeichenkette wie "nach oben", "nach unten", "nach links" oder "nach rechts" bestehen.
3. Die Farbtrübung sollte unterstützt werden, daher kann die Komponente idealerweise eine HEX- oder RGBA-Farbe annehmen.

Die resultierende API sollte wie folgt aussehen:

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

Dies ist, wo es für mich schwierig wird. Ich weiß genug über iOS Entwicklung gefährlich und nichts über Android Entwicklung zu sein, aber für iOS, scheint es, wie die folgenden funktionieren könnte, aber ich bin mir nicht sicher über Best Practices:

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

Etwas wie this.

Dann würde ich gerne das gleiche tun on Android using a Shader. Auch hier suche ich nach Best Practices, wie das geht.

Endlich, meine Hoffnung ist, dass ich im Grunde alle Komponenten der <Text>-Komponente erben kann, und nur Pfeffer in meinen eigenen Ergänzungen für die Beeinflussung der Farbe. 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 bin nicht auf der Suche nach jemanden, der die Arbeit für mich erledigt, aber ich suche nach praktischen Tipps, ein paar Ideen, wo man nach Informationen suchen und das Projekt richtig strukturieren kann, damit ich am Ende kann es an die Community zurückgeben. Vielen Dank!

Answer 1

Sie können meine react-native-text-gradient überprüfen. Es basiert auf der Standard-Komponente <Text> und erbt alle seine Eigenschaften. Momentan wird die Verschachtelung unter Android nicht unterstützt (z. B. können Sie keinen Gradientenknoten in einen anderen einfügen), aber die iOS-Verschachtelung wird bereits unterstützt.