React-Native中非常賤的畫虛線的方式

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庫代價太大了