Чи підтримують рідні стилі React градієнти?

Я бачу, що хтось це зробив для цього: https://github.com/brentvatne/react-native-linear-gradient

Але чи існує підтримка цього в самому RN? Щось на зразок

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

Не зараз. Ви повинні користуватися бібліотекою, яку ви зв’язали; нещодавно вони додали підтримку Android, і це один з основних факторів, що сприяють реагуванню.

Спочатку біжи npm install expo-linear-gradient --save

Вам не потрібно використовувати анімований тег, але це те, що я використовував у своєму коді.

всередині colors={[ put your gradient colors ]}

тоді ви можете використовувати щось на зразок цього:

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

Ви можете спробувати цей код JS .. 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>
        );
  }
}

Шукаючи подібне рішення, я щойно натрапив на цей абсолютно новий підручник, який дозволяє з’єднати Swift фоновий градієнт ( https://github.com/soffes/GradientView ) під час проходження кожного кроку, щоб отримати робочий компонент React.

Це покроковий посібник, що дозволяє вам створити власний компонент, поєднавши компонент swift і object-c у корисний компонент React Native, який замінює стандартний компонент View і дозволяє визначити такий градієнт, як наступний:

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

Ви можете знайти підручник тут: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/

Ось хороший вибір для градієнтів для обох платформ iOS та Android:

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

Є й інші підходи, як expo, однак реакція-рідний-лінійний-градієнт для мене спрацювала краще.

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

Просто експортуйте свій градієнт як SVG і використовуйте його, використовуючи react-native-svgі коли після імпорту компонента встановіть ширину та висоту та preserveAspectRatio="xMinYMin slice"масштабуйте градієнт SVG відповідно до ваших потреб.

React Native ще не надав кольору градієнта. Але все-таки ви можете зробити це за допомогою пакета nmp, що називається, react-native-linear-gradientабо натисніть тут для отримання додаткової інформації

1. npm install react-native-linear-gradient --save
2. використовувати import LinearGradient from 'react-native-linear-gradient';у файлі вашої програми

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

Ось готове чисте рішення JavaScript:

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

Ось вихідний код пакета npm, що використовує це рішення: https://github.com/flyskywhy/react-native-smooth-slider/blob/0f18a8bf02e2d436503b9a8ba241440247ef1c44/src/Slider.js#L329

Ось скріншот насиченості та яскравості градієнтної палітри за допомогою цього пакета npm: https://github.com/flyskywhy/react-native-slider-color-picker