React Native 样式是否支持渐变？

Question

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

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

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

Answer 1

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

Answer 2

寻找类似的解决方案我刚刚看到这个全新的教程，它可以让你桥接一个 Swift 渐变背景 (https://github.com/soffes/GradientView) 库，同时逐步完成每个步骤以获得一个工作的 React 组件.

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

Answer 3

这里是两个平台 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',
  },
});

Answer 4

首先，运行 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);

Answer 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

Answer 6

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';
<pre> <code><LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}> <Text> Your Text Here </Text> </LinearGradient>

Answer 7

只需将渐变导出为 SVG 并使用 react-native-svg 并在导入组件后设置宽度和高度并 preserveAspectRatio="xMinYMin slice" 缩放满足您需求的 SVG 渐变。

Answer 8

EXPO?嗯，在React Native using EXPO中使用这个方法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>

完整 Link 此处：https://docs.expo.dev/versions/latest/sdk/linear-gradient/

Answer 9

是 React Native 支持渐变使用 react-native-linear-gradient 库。

React Native 样式是否支持渐变？

Does React Native styles support gradients?

react-native