React Native样式是否支持渐变？

Question 1

我看到有人为此做过：https : //github.com/brentvatne/react-native-linear-gradient

但是RN本身是否支持它？就像是

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

Question 2

现在不行。您应该使用链接的库。他们最近添加了Android支持，它是react-native的主要贡献者之一。

Question 3

第一次运行 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);

Question 4

您可以尝试使用此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>
        );
  }
}

Question 5

在寻找类似的解决方案时，我刚遇到了这个全新的教程，它使您可以在完成每个步骤以获取可用的React组件的同时桥接Swift渐变背景（https://github.com/soffes/GradientView）库。

这是一个循序渐进的教程，允许您通过将swift和Objective-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/

Question 6

对于iOS和Android平台，渐变都是不错的选择：

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

还有其他类似expo的方法，但是react-native-linear-gradient对我来说效果更好。

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

Question 7

只需将渐变导出为SVG，react-native-svg然后在导入组件集的宽度和高度以及preserveAspectRatio="xMinYMin slice"在需要时缩放SVG渐变时使用，即可使用它。

Question 8

React Native还没有提供渐变颜色。但是，您仍然可以使用名为nmp的软件包来执行此操作，react-native-linear-gradient也可以单击此处获取更多信息

npm install react-native-linear-gradient --save
使用import LinearGradient from 'react-native-linear-gradient';你的应用程序文件

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

Question 9

这是可用于生产的纯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