Ich sehe, dass jemand dies dafür gemacht hat: https://github.com/brentvatne/react-native-linear-gradient
Aber gibt es Unterstützung dafür in RN selbst? Etwas wie
style = StyleSheet.create({
backgroundGradient: "vertical",
backgroundGradientTop: "#333333",
backgroundGradientBottom: "#666666"
});
react-native
Irgendein Typ
quelle
quelle
Erster Lauf
npm install expo-linear-gradient --save
Sie müssen kein animiertes Tag verwenden, aber das habe ich in meinem Code verwendet.
Innerhalb
colors={[ put your gradient colors ]}
dann können Sie so etwas verwenden:
quelle
Auf der Suche nach einer ähnlichen Lösung bin ich gerade auf dieses brandneue Tutorial gestoßen, mit dem Sie eine Bibliothek mit Swift-Verlaufshintergrund ( https://github.com/soffes/GradientView ) überbrücken können, während Sie jeden Schritt durchlaufen, um eine funktionierende React-Komponente zu erhalten.
Es handelt sich um eine Schritt-für-Schritt-Anleitung, mit der Sie Ihre eigene Komponente erstellen können, indem Sie die schnelle und die objektive c-Komponente zu einer verwendbaren React Native-Komponente verbinden, die die Standard-View-Komponente überschreibt und einen Gradienten wie den folgenden definiert:
Das Tutorial finden Sie hier: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/
quelle
Hier ist eine gute Wahl für Farbverläufe für beide Plattformen iOS und Android:
https://github.com/react-native-community/react-native-linear-gradient
Es gibt andere Ansätze wie expo, aber React-Native-Linear-Gradient hat für mich besser funktioniert.
quelle
React Native hat die Verlaufsfarbe noch nicht angegeben. Sie können dies jedoch mit einem NMP-Paket namens tun
react-native-linear-gradient
oder hier klicken, um weitere Informationen zu erhaltennpm install react-native-linear-gradient --save
import LinearGradient from 'react-native-linear-gradient';
in Ihrer Anwendungsdateiquelle
Exportieren Sie einfach Ihren Verlauf als SVG und verwenden Sie ihn mit
react-native-svg
und wann Sie nach dem Importieren Ihrer Komponente Breite und Höhe eingestellt habenpreserveAspectRatio="xMinYMin slice"
, um einen SVG-Verlauf nach Ihren Wünschen zu skalieren.quelle
Hier ist eine produktionsreife reine JavaScript-Lösung:
Hier ist der Quellcode eines npm-Pakets, das diese Lösung verwendet: https://github.com/flyskywhy/react-native-smooth-slider/blob/0f18a8bf02e2d436503b9a8ba241440247ef1c44/src/Slider.js#L329
Hier ist der Screenshot der Farbverlaufspalette von Sättigung und Helligkeit mit diesem npm-Paket: https://github.com/flyskywhy/react-native-slider-color-picker
quelle