React Native 样式是否支持渐变？答案

【问题标题】：Does React Native styles support gradients?React Native 样式是否支持渐变？
【发布时间】：2015-08-15 18:31:35
【问题描述】：

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

但是 RN 本身是否支持它？类似的东西

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

【问题讨论】：

标签： react-native

【解决方案1】：

暂时没有。您应该使用您链接的库；他们最近添加了 Android 支持，这是 react-native 的主要贡献者之一。

【讨论】：

【解决方案2】：

只需将您的渐变导出为 SVG 并使用react-native-svg 使用它，在您导入组件后设置宽度和高度以及preserveAspectRatio="xMinYMin slice" 以根据您的需要缩放 SVG 渐变。

【讨论】：

这个答案也值得评论?。数百名开发人员使用 react-native-svg 库，并且仍然安装更多具有重复功能的库?。我震惊地向下滚动，没有人提到它，并认为我可能是最聪明的??‍♂️。
同意@AlexShtromberg Smartest 解决方案，无需额外的库。值得更多的支持。
preserveAspectRatio="xMinYMin slice" 哇哦。太棒了。

【解决方案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);

【讨论】：

【解决方案4】：

这是适用于 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',
  },
});

【讨论】：

【解决方案5】：

这是一个生产就绪的纯 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

【讨论】：

【解决方案6】：

寻找一个类似的解决方案我刚刚遇到了这个全新的教程，它可以让您在逐步完成每个步骤以获得一个工作的 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/

【讨论】：

最好在您的答案中包含尽可能多的链接站点。就目前而言，它可能会作为“仅限链接”的答案被删除。查看“如何给出一个好的答案”的常见问题解答。干杯。

【解决方案7】：

React Native 还没有提供渐变色。但是，您仍然可以使用名为 react-native-linear-gradient 的 NPM 包来实现，也可以使用 click here for more info

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

&lt;LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}&gt; &lt;Text&gt; Your Text Here &lt;/Text&gt; &lt;/LinearGradient&gt;

【讨论】：

【解决方案8】：

EXPO? 那么，在使用 EXPO 的 React Native 中使用这种方法 Linear Gradient。 （2021 年 11 月更新）

没有 Pod 安装，没有错误，没有额外的链接文件。

expo install expo-linear-gradient

然后

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>

完整链接：https://docs.expo.dev/versions/latest/sdk/linear-gradient/

【讨论】：