美文网首页reactReact Native学习RN
RN-react-native-linear-gradient颜

RN-react-native-linear-gradient颜

作者: 精神病患者link常 | 来源:发表于2018-01-21 19:42 被阅读1413次

react-native-linear-gradient

安装

npm install react-native-linear-gradient --save
react-native link

使用

<LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} style={{height: 150}}>
</LinearGradient>
image.png

一 、默认情况下,渐变色的方向是从上向下的,假如你想渐变色从左向右,或者斜角渐变,就需要设置下了

react-native-linear-gradient有两个属性

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

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

例如:
start: { x: 0.3, y: 0.4 } 渐变是从 左侧30%, 上部 40% 开始
end: { x: 0.7, y: 0.8 } 渐变是从 左侧70%, 上部 80% 结束

 <LinearGradient
                    start={{x: 0.25, y: 0.25}} end={{x: 0.75, y: 0.75}}
                    colors={['red', 'green', 'black']}
                    style={{height: 150, flex: 1}}>
                    
                </LinearGradient>
image.png

从左到右的渐变就可以设置出来了

start={{x: 0, y: 0}} 
end={{x: 1, y: 0}}

二、假如想指定每种渐变颜色的范围,比如红色占20%, 绿色占70%,黑色占10%,也是可以设置的,就用到了另外一个属性了 locations

locations 对应的是 colors

locations={[0.2,0.7,1.0]}
colors={['red', 'green', 'black']}

red 范围就是 0.0 - 0.2
green 范围就是 0.0 - 0.7
black 范围就是 0.7 - 1.0

以上是根据官网得出的结论,但是我实际使用的时候并不是这样的......

 colors={['red', 'green', 'black']}
locations={[0.4,0.5,0.6]}
image.png

我推测,0.4是渐变的起点,0.6是渐变的终点
这种情况下三个渐变色的范围应该是平分的

继续测试其他情况
 colors={['red', 'green', 'black']}
locations={[0.2,0.5,0.6]}
image.png

看不出来什么效果,斗胆locations里面多加了一个参数
colors={['red', 'green', 'black']}
locations={[0.2,0.3,0.5,0.6]}


image.png

大概得出个这么个结论

0.2 是渐变起始位置
0.2 - 0.3 是红色的范围
0.3 - 0. 5 是绿色的范围
0.5 - 0.6 是黑色的范围
0.6 是渐变的结束位置

不知道对不对~

相关文章

  • RN-react-native-linear-gradient颜

    react-native-linear-gradient 安装npm install react-native-l...

  • 颜颜来了

    她叫颜颜,是个年轻漂亮的女孩,性格开朗,很讨人喜欢。她在上班的地方遇上了他,那时候他们还没挑明关系,正处于暧昧期,...

  • 忙忙说

    颜浅,颜浅之,颜牧之

  • 颜狗颜狗,看颜看颜还看手

    现在啊,手控足控脚踝控锁骨控各种控只有你想不到没有我控不到只想说一句每个人都会有自己的优点而我只想做一个忠实的舔狗...

  • 颜值or颜不值

    有个小朋友和我抱怨,现在找的工作要靠脸吃饭,我都不知道该吐槽呢还是吐槽呢还是吐槽呢?颜值总比颜不值好吧,你是非要靠...

  • 颜值的颜

    相貌是与生俱来的事情,而真正的你又在哪里?这个世界对颜值的严重高估,让我不止一次地怀疑人类的进化程度,因为我认为...

  • 2017.12.04      颜颜总结

    致青春特种兵动销训练营第十五天 今天是第三周的第一天,8个班64人签到仅1分6秒当然我们会更好,一切快且有序,感觉...

  • 2017.12.06    颜颜小结

    致青春特种兵动销训练营第十七天 12/6友肌赞助的电影《二代妖精之今生有幸》发布会,我在友肌直播间全程看了,氛围很...

  • 颜港颜港

    客居城市东,清晨步行经过时,始知方塔对面,沿护城河与鸭潭头相连的小路叫颜港街,也就是颜市有名的网红打卡赏樱花之处...

  • 朝颜,夕颜

    墙面爬满绿意,堆满落叶的腐殖质中长出了一片藤蔓,藤蔓上三三两两开满蓝白色的牵牛花。 牵牛花于清晨盛开,凋零在中午,...

网友评论

    本文标题:RN-react-native-linear-gradient颜

    本文链接:https://www.haomeiwen.com/subject/dmjqaxtx.html