ReactNative创建一个漂亮简洁好看的三角冒泡框
前言
想做一个类似聊天泡泡的ui组件,无奈找不到如何使用View
创建三角形的例子。。
突发奇想,css3
可以通过更改样式,使一个div
变成三角形,那么我们是不是也可以借鉴以下实现方法,然后移植到rn上?
开干
说干就干,首先搜集以下使用css3绘制三角形的教程,很多:
纯CSS绘制三角形(各种角度)
核心代码:
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
这样就实现了一个三角形的效果,如图:
image.png
分析
经过代码的分析,可以看到,实现流程为:
- 设置左边的border宽度50,背景透明;
- 设置右边的border宽度50,背景透明;
- 设置底部的border宽度100,背景颜色自定义,也就是最终显示的颜色;
所以就好办了,我们想让箭头在上,就设置左右宽度低一点,底部大一点。同理,设置箭头在左,就设置上下少,右边多。
转换
好了,我们该把代码转换成rn支持的样式了,很简单!
<View style={{ width: 0, height: 0, borderColor: 'transparent', borderTopWidth: 7, borderBottomWidth: 7, borderRightWidth: 10, borderRightColor: '#79bd9a' }} />
设置上下越大,三角就越不尖。。
效果
是时候上个效果图了:
Screen Shot 2017-12-14 at 18.01.19.png
后续
发现了个bug:在android上效果不显示..
正在修复中,日后更新,敬请留意
修复
嗯,再查找一番,深入了解原理后:
用纯css3绘制三角形的原理
终于找到了两个平台通用的代码!
最终结果如下:
<View style={{ width: 0, height: 0, borderTopWidth: 10, borderTopColor: 'transparent', borderRightWidth: 10, borderRightColor: '#79bd9a', borderLeftWidth: 5, borderLeftColor: 'transparent', borderBottomWidth: 10, borderBottomColor: 'transparent', }} />
效果:
Screen Shot 2017-12-14 at 18.39.49.png
原文地址:https://www.jianshu.com/p/ed14e5bf95bc
相关推荐
-
AngularJS之双向数据绑定,class绑定 框架
2019-9-4
-
拥抱Node.js 8.0,N-API入门极简例子 框架
2019-5-12
-
React应该如何优雅的绑定事件? 框架
2019-1-3
-
如何科学地在Vue项目中封装axios 框架
2019-3-14
-
使用Nuxt+Vue+Node构建的SSR博客项目 框架
2019-3-21
-
Rxjs_观察者模式和发布订阅模式 框架
2019-1-10
-
Vue.js动画笔记 框架
2018-12-17
-
axios(封装使用、拦截特定请求、判断所有请求加载完毕) 框架
2019-5-14
-
MVVM 框架解析之双向绑定 框架
2018-1-22
-
最简单的vue消息提示全局组件 框架
2019-6-22