React Native样式支持渐变吗?

r1zhe5dt  于 2023-10-22  发布在  React
关注(0)|答案(9)|浏览(150)

我看到有人为它做了这个:https://github.com/brentvatne/react-native-linear-gradient
但是RN本身是否支持它呢?事

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

bqujaahr1#

现在不行。你应该使用你链接的库;他们最近增加了对Android的支持,这是由react-native的主要贡献者之一。

ttp71kqs

ttp71kqs2#

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

v6ylcynt

v6ylcynt3#

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

ruoxqz4g4#

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

oiopk7p55#

有点晚,但最好的解决方案IMO是使用SVG梯度与react-native-svg,这是包括在大多数项目。
这里有一个几行多功能组件,每当我需要渐变时,我都会使用它:

简单SVG线性渐变组件

import { View, StyleSheet, ViewProps, DimensionValue } from 'react-native'
import Svg, { Defs, Rect, LinearGradient, Stop } from 'react-native-svg'

type GradientProps = { fromColor: string, toColor: string, children?: any, height?: DimensionValue, opacityColor1?: number, opacityColor2?: number } & ViewProps

function Gradient({ children, fromColor, toColor, height = '100%', opacityColor1 = 1, opacityColor2 = 1, ...otherViewProps }: GradientProps) {
    const gradientUniqueId = `grad${fromColor}+${toColor}`.replace(/[^a-zA-Z0-9 ]/g, '')
    return <>
        <View style={[{ ...StyleSheet.absoluteFillObject, height, zIndex: -1, top: 0, left: 0 }, otherViewProps.style]} {...otherViewProps}>
            <Svg height='100%' width="100%" style={StyleSheet.absoluteFillObject}>
                <Defs>
                    <LinearGradient id={gradientUniqueId} x1="0%" y1="0%" x2="0%" y2="100%">
                        <Stop offset="0" stopColor={fromColor} stopOpacity={opacityColor1} />
                        <Stop offset="1" stopColor={toColor} stopOpacity={opacityColor2} />
                    </LinearGradient>
                </Defs>
                <Rect width="100%" height="100%" fill={`url(#${gradientUniqueId})`} />
            </Svg>
        </View>
        {children}
    </>
};

export default Gradient

See those example usages on snack

k4aesqcs

k4aesqcs6#

EXPO?好吧,在React Native中使用EXPO使用这个方法线性梯度。* (更新于11月)2021年)*

没有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/

gj3fmq9x

gj3fmq9x7#

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

mmvthczy

mmvthczy8#

React Native尚未提供渐变颜色。但是,你仍然可以使用一个名为react-native-linear-gradient的NPM包来完成,或者你可以使用click here for more info

  1. npm install react-native-linear-gradient --save
    1.在应用程序文件中使用import LinearGradient from 'react-native-linear-gradient';
  2. ``
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}> <Text> Your Text Here </Text> </LinearGradient>
6ovsh4lw

6ovsh4lw9#

寻找一个类似的解决方案,我刚刚遇到了这个全新的教程,它可以让你桥接一个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/

相关问题