React-Native中非常贱的画虚线的方式

小鱼儿 2022-05-04 09:27 358阅读 0赞

## React-Native中非常贱的画虚线的方式 ##

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

![70][] 然后在网上淘了一番,结果发现这种写法官方提供了这一个属性,但是使用时有很多限制,比如使用时必须的配合borderRadius进行使用,而且画出的虚线也不是很好看,用来画虚线框效果挺好的,下面是官方的使用方式:

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

再来看看官方issue[官方虚线使用][Link 1]  
不满意官方产生的效果,我就使用了下面这种方式,如下面代码所示:

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>
      );
    };

效果如下所示:

![70 1][]

--------------------

注意:这只是一种实现方法,多查官方资料学习,使用art库代价太大了

[70]: /images/20220504/f16870972c6a4dce8dcb57a29147aea5.png
[Link 1]: https://github.com/facebook/react-native/issues/18285
[70 1]: /images/20220504/c66092f55f0f4b31be192358860cd098.png

发表评论取消回复

表情：

评论列表（有 0 条评论，358人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS画虚线------

直接上代码了 // 画虚线 // 创建一个imageView 高度是你想要的虚线的高度一般设为2 UIImageView lineI

偏执的太偏执、/ 2023年10月17日 16:27/ 0 赞/ 1 阅读

相关 php虚线园的代码,canvas画虚线圆

本文要实现的图形 ![bVFVJg?w=121&h=122][bVFVJg_w_121_h_122] 一个简单的占比统计。。实现的方案是html js合成首先是简单

本是古典何须时尚/ 2023年01月17日 04:55/ 0 赞/ 280 阅读

相关 openlayers画虚线 (十四)

在openlayers中画虚线主要是通过设置Style对象中Stroke里的lineDash属性来实现，lineDash在官网文档描述中很模糊，只说了它是一个数组，再尝试后发现

我就是我/ 2022年12月24日 02:53/ 0 赞/ 785 阅读

相关非常不错的网页画时序图

非常不错的网页画时序图 [https://www.websequencediagrams.com/][https_www.websequencediagrams.com]

Myth丶恋晨/ 2022年08月06日 10:17/ 0 赞/ 168 阅读

相关手贱的后果

手贱的后果就是往往会导致一个鸡毛蒜皮的小问题升级为系统级的大问题。今天为了使用clutter1.10.6中的一些新funtion而试图安装重新安装cl

末蓝、/ 2022年06月10日 03:56/ 0 赞/ 197 阅读

相关 React-Native中非常贱的画虚线的方式

React-Native中非常贱的画虚线的方式在使用react-native中的时候,使用css画虚线的时候,警告提示不支持,提示信息如下所示: ![70][] 然后

小鱼儿/ 2022年05月04日 09:27/ 0 赞/ 359 阅读

相关 Android画虚线攻略

一般我们在Android画虚线有两种方式 1.布局里面画虚线：在drawable里面创建一个dotted\_line\_view.xml文件，里面内容如下： <?x

àì夳堔傛蜴生んèń/ 2022年04月27日 19:04/ 0 赞/ 2165 阅读

相关小程序canvas画虚线圆

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

约定不等于承诺〃/ 2021年12月11日 13:13/ 0 赞/ 437 阅读

相关贱贱的美团安卓客户端

起因：自打愚安我开始使用android设备以来，一直觉得google还算厚道，应用列表里的顺序一直都是依据APP的名称，按照先中文（拼音字母表顺序），后英文（字母表顺序）的

淩亂°似流年/ 2021年11月26日 12:44/ 0 赞/ 297 阅读

相关用HTML5的canvas标签画虚线

原生代码 function drawDashLine(ctx, x1, y1, x2, y2, dashLength){ //ctx 声明的

深藏阁楼爱情的钟/ 2021年09月14日 09:26/ 0 赞/ 642 阅读