React Native 畫一條漂亮的分割線

背景

  • 在App開發(fā)中稿辙,我們經(jīng)常會(huì)用到分割線贩虾,比如FlatList 中我們會(huì)用到ItemSeparatorComponent作為行與行之間的分隔線組件平道。通常制作分割線的思路是募强,我們可以使用View組件寞宫,設(shè)置它的高度為1或者0.5萧福,然后給它設(shè)置一個(gè)背景顏色”哺常或者設(shè)置border鲫忍,border的寬度為1或者0.5等方法。
  • 通過(guò)這種方式設(shè)置的分割線我們經(jīng)常會(huì)發(fā)現(xiàn)有一些問題钥屈,比如設(shè)置View高度為1悟民。我們仔細(xì)觀察后會(huì)發(fā)現(xiàn),在一個(gè)列表中篷就,這些分割線有粗有細(xì)射亏,顯的不均勻。而且分割線較粗腻脏,導(dǎo)致列表不美觀鸦泳。
  • 我們也可以設(shè)置高度為0.5,或者使用“StyleSheet. hairlineWidth”獲取最細(xì)的線的值永品,這樣分割線比較細(xì)做鹰,但是,這樣會(huì)導(dǎo)致列表中分割線有時(shí)不展示鼎姐。

如何解決钾麸?

  • 方法其實(shí)非常的簡(jiǎn)單,就是當(dāng)我們?cè)O(shè)置分割線的時(shí)候炕桨,需要給分割線組件設(shè)置一個(gè)margin饭尝,margin值為你分割線的寬度值就可以,這其實(shí)算是React Native的一個(gè)bug献宫,然而FaceBoook卻遲遲沒有解決钥平。

簡(jiǎn)單的封裝一下_

import React, { PureComponent } from 'react'
import {
  View,
  StyleSheet
} from 'react-native'

class SpliteLine extends PureComponent {
  render () {
    let { lineHeight, color, style, contentStyle } = this.props
    return (
      <View style={{ backgroundColor: 'white', ...contentStyle }}>
        <View style={[{ height: 0, borderTopWidth: lineHeight, borderColor: color, opacity: 0.7, margin: StyleSheet.hairlineWidth }, style]} />
      </View>
    )
  }
}

SpliteLine.defaultProps = {
  lineHeight: StyleSheet.hairlineWidth,
  color: '#bdbdbd',
  contentStyle: {}
}

export default SpliteLine
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市姊途,隨后出現(xiàn)的幾起案子涉瘾,更是在濱河造成了極大的恐慌知态,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件立叛,死亡現(xiàn)場(chǎng)離奇詭異负敏,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)秘蛇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門其做,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人赁还,你說(shuō)我怎么就攤上這事妖泄。” “怎么了秽浇?”我有些...
    開封第一講書人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵浮庐,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我柬焕,道長(zhǎng)审残,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任斑举,我火速辦了婚禮搅轿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘富玷。我一直安慰自己璧坟,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開白布赎懦。 她就那樣靜靜地躺著雀鹃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪励两。 梳的紋絲不亂的頭發(fā)上黎茎,一...
    開封第一講書人閱讀 49,046評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音当悔,去河邊找鬼傅瞻。 笑死,一個(gè)胖子當(dāng)著我的面吹牛盲憎,可吹牛的內(nèi)容都是我干的嗅骄。 我是一名探鬼主播,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼饼疙,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼溺森!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤儿惫,失蹤者是張志新(化名)和其女友劉穎澡罚,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肾请,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年更胖,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了铛铁。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡却妨,死狀恐怖饵逐,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情彪标,我是刑警寧澤倍权,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站捞烟,受9級(jí)特大地震影響薄声,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜题画,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一默辨、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧苍息,春花似錦缩幸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至盖喷,卻和暖如春爆办,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背传蹈。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工押逼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人惦界。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓挑格,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親沾歪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子漂彤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評(píng)論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)挫望。 注意:講述HT...
    kismetajun閱讀 27,422評(píng)論 1 45
  • 一立润、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”媳板。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,584評(píng)論 0 6
  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形桑腮,我收集了32種圖形,在下面列出蛉幸。直接用CSS3畫出這些圖形破讨,要比...
    劍殘閱讀 9,474評(píng)論 0 8
  • 在上一章節(jié)提陶,我們討論了元素顯示的基本特點(diǎn)。而在這一章匹层,我們將看到css屬性是如果改變?cè)仫@示外觀的隙笆,這包括了pad...
    秋名山車神12138閱讀 837評(píng)論 0 0