安装 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

 

posted on 2018-03-29 11:37  浅唱年华1920  阅读(1205)  评论(0编辑  收藏  举报