Unterstützt React Native-Stile Farbverläufe?

76

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"
});
Irgendein Typ
quelle

Antworten:

52

Nicht im Moment. Sie sollten die von Ihnen verknüpfte Bibliothek verwenden. Sie haben kürzlich Android-Unterstützung hinzugefügt und es ist von einem der Hauptverantwortlichen für React-Native.

isair
quelle
5

Sie können diesen JS-Code ausprobieren. Https://snack.expo.io/r1v0LwZFb

import React, { Component } from 'react';
import { View } from 'react-native';

export default class App extends Component {
  render() {
    const gradientHeight=500;
    const gradientBackground  = 'purple';
        const data = Array.from({ length: gradientHeight });
        return (
            <View style={{flex:1}}>
                {data.map((_, i) => (
                    <View
                        key={i}
                        style={{
                            position: 'absolute',
                            backgroundColor: gradientBackground,
                            height: 1,
                            bottom: (gradientHeight - i),
                            right: 0,
                            left: 0,
                            zIndex: 2,
                            opacity: (1 / gradientHeight) * (i + 1)
                        }}
                    />
                ))}
            </View>
        );
  }
}
Ashrith KS
quelle
1
Wie kann man Text über diesen Farbverlauf anzeigen?
Mozak
Schöne Lösungen, es funktioniert. Aber ich möchte Text und Schaltfläche in der Verlaufsansicht anzeigen. Wie kann ich es tun?
Cristina
40
Dieser Code erstellt Hunderte von Ansichten, was Auswirkungen auf die Leistung hat. Es ist eine sehr hackige Problemumgehung, keine produktionsreife Lösung. Verwenden Sie stattdessen das Paket "React-Native-Linear-Gradient".
Bruno Lemos
9
Sicherlich keine produktionsreife Lösung, aber es ist für mich überraschend, dass Sie eine solche Lösung gefunden haben. Das Biegen von Dingen nach Ihren Bedürfnissen ist sicherlich eine seltene Fähigkeit.
ArkaneKhan
1
@BrunoLemos, ich wünschte, ich hätte Ihre Kommentare gelesen, bevor ich diese Option erkundete;))
Oo -_- oO
5

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:

 import { LinearGradient } from "expo-linear-gradient";
 import { Animated } from "react-native";

 <AnimatedLinearGradient
    colors={["rgba(255,255,255, 0)", "rgba(255,255,255, 1)"]}
    style={{ your styles go here }}/>

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
Justin Uzzanti
quelle
3

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:

 <LinearGradient 
   style={styles.gradient} 
   locations={[0, 1.0]} 
   colors={['#5ED2A0', '#339CB1']}
 />

Das Tutorial finden Sie hier: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/

Thomas
quelle
1
Es ist am besten, so viel wie möglich von der verlinkten Seite in Ihre Antwort aufzunehmen. Derzeit wird es wahrscheinlich als "Nur-Link" -Antwort gelöscht. In den FAQ finden Sie Informationen dazu, wie Sie eine gute Antwort geben können. Prost.
stef
3

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.

<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>

// Later on in your styles..
var styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});
Cassio Seffrin
quelle
1

React Native hat die Verlaufsfarbe noch nicht angegeben. Sie können dies jedoch mit einem NMP-Paket namens tun react-native-linear-gradientoder hier klicken, um weitere Informationen zu erhalten

  1. npm install react-native-linear-gradient --save
  2. verwenden import LinearGradient from 'react-native-linear-gradient';in Ihrer Anwendungsdatei
  3.         <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}>
              <Text>
                Your Text Here
              </Text>
            </LinearGradient> 

Ashif Sadique
quelle
1

Exportieren Sie einfach Ihren Verlauf als SVG und verwenden Sie ihn mit react-native-svgund wann Sie nach dem Importieren Ihrer Komponente Breite und Höhe eingestellt haben preserveAspectRatio="xMinYMin slice", um einen SVG-Verlauf nach Ihren Wünschen zu skalieren.

Ilya Ilin
quelle
1
Diese Antwort verdient ebenfalls einen Kommentar. Hunderte von Entwicklern verwenden die React-Native-SVG-Bibliothek und installieren immer noch mehr Bibliotheken mit duplizierten Funktionen. Ich scrollte schockierend nach unten, dass niemand es erwähnte und dachte, ich könnte der klügste sein.
Alex Shtromberg
0

Hier ist eine produktionsreife reine JavaScript-Lösung:

<View styles={{backgroundColor: `the main color you want`}}>
    <Image source={`A white to transparent gradient png`}>
</View>

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

React-Native-Slider-Farbwähler

Li Zheng
quelle