我看到有人为它做了这个:https://github.com/brentvatne/react-native-linear-gradient
但是RN本身是否支持它呢?事
style = StyleSheet.create({
backgroundGradient: "vertical",
backgroundGradientTop: "#333333",
backgroundGradientBottom: "#666666"
});
我看到有人为它做了这个:https://github.com/brentvatne/react-native-linear-gradient
但是RN本身是否支持它呢?事
style = StyleSheet.create({
backgroundGradient: "vertical",
backgroundGradientTop: "#333333",
backgroundGradientBottom: "#666666"
});
9条答案
按热度按时间bqujaahr1#
现在不行。你应该使用你链接的库;他们最近增加了对Android的支持,这是由react-native的主要贡献者之一。
ttp71kqs2#
只需将您的渐变导出为SVG,并使用
react-native-svg
使用它,当您导入组件设置宽度和高度以及preserveAspectRatio="xMinYMin slice"
时,可以根据您的需要缩放SVG渐变。v6ylcynt3#
首先,运行
npm install expo-linear-gradient --save
你不需要使用动画标记,但这是我在代码中使用的。
内部
colors={[ put your gradient colors ]}
然后你可以使用类似这样的东西:
ruoxqz4g4#
这是适用于iOS和Android平台的渐变的好选择:
https://github.com/react-native-community/react-native-linear-gradient
还有其他的方法,比如expo,但是react-native-linear-gradient对我来说效果更好。
oiopk7p55#
有点晚,但最好的解决方案IMO是使用SVG梯度与
react-native-svg
,这是包括在大多数项目。这里有一个几行多功能组件,每当我需要渐变时,我都会使用它:
简单SVG线性渐变组件
See those example usages on snack
k4aesqcs6#
EXPO?好吧,在React Native中使用EXPO使用这个方法线性梯度。* (更新于11月)2021年)*
没有Pod安装,没有错误,没有额外的链接文件。
然后
完整链接:https://docs.expo.dev/versions/latest/sdk/linear-gradient/
gj3fmq9x7#
下面是一个生产就绪的纯JavaScript解决方案:
以下是使用此解决方案的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
mmvthczy8#
React Native尚未提供渐变颜色。但是,你仍然可以使用一个名为
react-native-linear-gradient
的NPM包来完成,或者你可以使用click here for more infonpm install react-native-linear-gradient --save
1.在应用程序文件中使用
import LinearGradient from 'react-native-linear-gradient';
6ovsh4lw9#
寻找一个类似的解决方案,我刚刚遇到了这个全新的教程,它可以让你桥接一个Swift渐变背景(https://github.com/soffes/GradientView)库,同时走过每一步,以获得一个工作的React组件。
这是一个循序渐进的教程,允许你通过将swift和objective-c组件桥接成一个可用的React Native组件来构建自己的组件,该组件覆盖了标准的View组件,并允许你定义一个如下的渐变:
你可以在这里找到教程:http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/