Ondersteunt React Native-stijlen verlopen?

Ik zie dat iemand dit ervoor heeft gemaakt: https://github.com/brentvatne /react-native-linear-gradient

Maar is er ondersteuning voor in RN zelf? Iets als

style = StyleSheet.create({
    backgroundGradient: "vertical",
    backgroundGradientTop: "#333333",
    backgroundGradientBottom: "#666666"
});

Antwoord 1, autoriteit 100%

Op dit moment niet. U moet de bibliotheek gebruiken die u hebt gekoppeld; ze hebben onlangs Android-ondersteuning toegevoegd en het is door een van de belangrijkste bijdragers van react-native.

Antwoord 2, autoriteit 44%

Exporteer uw verloop gewoon als SVGen gebruik het met react-native-svgen wanneer u na het importeren van uw component de breedte en hoogte importeert en preserveAspectRatio="xMinYMin slice"om een ​​SVG-verloop naar wens te schalen.

Antwoord 3, autoriteit 17%

Voer eerst npm install expo-linear-gradient --save

uit

Je hoeft geen geanimeerde tag te gebruiken, maar dit is wat ik in mijn code gebruikte.

inside colors={[ put your gradient colors ]}

dan kun je zoiets als dit gebruiken:

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);

Antwoord 4, autoriteit 12%

Hier is een goede keuze voor verlopen voor zowel iOS- als Android-platforms:

https://github.com/react-native-community/ react-native-linear-gradient

Er zijn andere benaderingen zoals expo, maar react-native-linear-gradient heeft voor mij beter gewerkt.

<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',
  },
});

Antwoord 5, autoriteit 6%

Hier is een productieklare pure JavaScript-oplossing:

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

Hier is de broncode van een npm-pakket dat deze oplossing gebruikt:
https://github.com flyskywhy/react-native-smooth-slider/blob/0f18a8bf02e2d436503b9a8ba241440247ef1c44/src/Slider.js#L329

Hier is de schermafbeelding van het verlooppalet van verzadiging en helderheid met dit npm-pakket:
https://github.com/flyskywhy/react-native-slider-color- kiezer

Antwoord 6, autoriteit 5%

Op zoek naar een vergelijkbare oplossing kwam ik zojuist deze gloednieuwe tutorial tegen, waarmee je een Swift-gradiëntachtergrond kunt overbruggen (https ://github.com/soffes/GradientView) bibliotheek terwijl je door elke stap loopt om een ​​werkend React-component te krijgen.

Het is een stapsgewijze zelfstudie, waarmee u uw eigen component kunt bouwen door de snelle en objectieve-c-component te overbruggen tot een bruikbare React Native-component, die de standaard View-component overschrijft en u in staat stelt een verloop te definiëren zoals het volgende:

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

Je kunt de tutorial hier vinden: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/

Antwoord 7, autoriteit 5%

React Native heeft de verloopkleur nog niet geleverd. Maar toch, je kunt het doen met een NPM-pakket genaamd react-native-linear-gradientof je kunt klik hier voor meer info

1. npm install react-native-linear-gradient --save

2. gebruik import LinearGradient from 'react-native-linear-gradient';in uw toepassingsbestand

3. <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}> <Text> Your Text Here </Text> </LinearGradient>

Antwoord 8, autoriteit 3%

EXPO?Gebruik deze methode Lineair verloopin React Native met EXPO. (Bijgewerkt in november 2021)

Geen podinstallaties, geen fouten, geen extra gekoppelde bestanden.

expo install expo-linear-gradient

Dan

import { LinearGradient } from 'expo-linear-gradient';
<View style={styles.container}>
      <LinearGradient
        // Background Linear Gradient
        colors={['rgba(0,0,0,0.8)', 'transparent']}
        style={styles.background}
      />
      <LinearGradient
        // Button Linear Gradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={styles.button}>
        <Text style={styles.text}>Sign in with Facebook</Text>
      </LinearGradient>
    </View>

Volledige link hier: https://docs.expo.dev/ versies/laatste/sdk/linear-gradient/