ReactNative创建一个漂亮简洁好看的三角冒泡框

框架

浏览数:349

2019-3-14

AD:资源代下载服务

前言

想做一个类似聊天泡泡的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

分析

经过代码的分析,可以看到,实现流程为:

  1. 设置左边的border宽度50,背景透明;
  2. 设置右边的border宽度50,背景透明;
  3. 设置底部的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