React Native中非常犀利的画虚线的方式

---

一、背景需求

App开发应用中，往往会有各种礼品卡或者抽奖卡片需要实现，这些卡片中难免会有一个数据需要分割开来，一般使用实线或者虚线进行分割，从而保证两个属性数据的独立性，给用户一眼看起来就很清楚的边距，讲到这里，那就离不开实线和虚线的实现，对于实现在React Native中比较容易实现，但对于虚线，可能由于各种原因，实现起来效果不是很乐观，在这里我总结了一种实现虚线的方法，下面我们来看看具体怎么做的。

在背景需求使用react-native中的时候,使用css画虚线的时候,官方会提示警告不支持,提示信息如下所示:

紧接着就在网上淘了一大番,结果发现这种写法官方提供了这一个属性,但是使用时有很多限制。

• 比如使用时必须的配合borderRadius进行使用
• 而且画出的虚线也不是很好看,用来画虚线框效果挺好的

下面是官方的一种使用方式:

   <View style={{ 
     borderColor: '#000',
     borderRadius: 0.5,
     height: 5,
     borderWidth: 1,
     borderStyle: 'dotted' }} 
     />

再来看看官方issue文档中的具体说明吧 官方虚线使用

最终的结果就是不满意官方产生的效果，得考虑使用其他的方案实现。

二 、具体实现

不满官方的提供的效果，那只能我们门自己去实现了，于是乎我就使用了下面这种方式,通过不停的打印一个文本字符，由字符数量控制虚线的长短。
最终实现效果如下面代码所示:

export const renderDotted = () => {
  const width = styleDict.windowW / 2;
  const dottes = [];
  for (let i = 0; i < width; i++) {
    dottes.push(i);
  }
  return (
    <View style={{ flexDirection: 'row', width: styleDict.windowW - 35, justifyContent: 'center', overflow: 'hidden' }}>
      {
        dottes.map(() => {
          return <Text style={{ color: '#999693', fontSize: 10 }}>-</Text>;
        })
      }
    </View>
  );
};

效果如下所示:

相对于官方还是比较满意的一个效果，比较符合预期。

需要注意的是:这只是一种实现方法,多查官方资料学习,但是使用art库代价太大了，有其他想法的小伙伴也可以在评论中给出。

三、延展

以上也是其中的一种方案，后面我在做另外一个项目的时候，使用了另外一种新的方案，在此记录下，具体使用时小伙伴自己决定吧。

在我看来，这个效果稍微比上述效果会好一些。

具体思路如下：

仍然使用官方提供的属性，但是画一个完整的矩形，然后使用虚线属性设置，然后在定义一个绝对定位的 View视图，将这个矩形中的其他三边覆盖掉，只保留一条边进行展示即可。

---