首页 > 其他分享 >react-native 渐变组件 react-native-linear-gradient

react-native 渐变组件 react-native-linear-gradient

时间:2022-12-06 00:57:32浏览次数:65  
标签:linear gradient 渐变 number react native

react-native 渐变组件 react-native-linear-gradient

安装 link

yarn add  react-native-linear-gradient

react-native link   react-native-linear-gradient

link 之后就可以使用了

 

import LinearGradient from 'react-native-linear-gradient';

 

 

<LinearGradient colors={['#237af4', '#56b2e3', '#237af4']} style={{flex:1}}></LinearGradient>

默认 是从上往下渐变的:如图

 

如果想从左到右,或者倾斜渐变 就需要加属性了

start:{ x: number, y: number }
end:{ x: number, y: number }

start 就是渐变开始的位置,x、y 范围是 0 - 1 ,
end 同上,就是渐变结束的位置

 

<LinearGradient
            start={{x:1,y:0}}
            end={{x:0,y:1}}
            colors={['#237af4', '#56b2e3', '#237af4']} style={{flex:1}}></LinearGradient>

 

 详细的可以看下面这2个地址

官方文档地址   https://www.jianshu.com/p/757dfeae5162

 

  分类: react-native 标签: react-nativereact-native-linear-gradient

标签:linear,gradient,渐变,number,react,native
From: https://www.cnblogs.com/sexintercourse/p/16954022.html

相关文章