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

最新推荐文章于 2022-09-26 10:28:22 发布

转载最新推荐文章于 2022-09-26 10:28:22 发布 · 1.8k 阅读

文章标签：

#三角形冒泡样式 #react native

React Native 专栏收录该内容

24 篇文章

订阅专栏

博主想做类似聊天泡泡的UI组件，找不到创建三角形例子。通过搜集CSS3绘制三角形教程，分析实现流程，将代码转换为RN支持的样式。但在Android上效果不显示，经深入了解原理，最终找到两个平台通用的代码。

转载于：https://www.jianshu.com/p/ed14e5bf95bc

前言

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

效果：