2016-12-05 71 views
1

我可能沒有在創建問題標題方面做得最好。下面是對rnplay圍繞視圖的邊框在視圖顏色的邊緣周圍留出一些區域,以反應原生

https://rnplay.org/apps/eNIbjw

證明錯誤的問題是,我想顯示在用戶的化身一些彩色瓷磚,代表他們的地位。所以,我有一個View的頭像圖片,其背景色設置爲用戶的狀態顏色(示例代碼中爲綠色),我在View周圍有一個白色邊框,以便看起來更好。如果仔細觀察,也許按(Cmd + +)幾次來縮放屏幕,iOS中邊框周圍會有一條非常細的綠線。下面是它在iOS上的外觀截圖。

enter image description here

這個問題是不存在於Android和它似乎與周圍的邊框沒有細綠線完全沒有問題。

我嘗試了幾種不同的方式來解決這個問題,但是由於我的CSS知識有限,我無法做到這一點。

請分享,如果你有解決的辦法。

謝謝!

+0

我已經看到類似的邊界和意見問題。有時您會得到意想不到的結果。我認爲在他們的github回購報告中作爲一個問題報告會很好。 – abeikverdi

回答

0

下面的代碼應該給你相同的結果,但它不使用'border'屬性。它使用兩個圓圈,一個比另一個大。較大(父母)是白色,而內部(孩子)是綠色。由於你的justifyContent和alignItems都被設置爲'center',所以內部圓圈總是會有2px的白色。這裏是代碼:

<View style={styles.container}> 
    <View style={{width: 30, height: 30, marginHorizontal: 2}}> 
     <Image 
     source={{uri: 'https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Salesman_2-512.png'}} 
      style={{height: 30, width: 30}} /> 
     <View style={{backgroundColor: 'white', position: 'absolute', height: 16, width: 16, top: -6, right: -6, 
     borderRadius: 8, justifyContent: 'center', alignItems: 'center'}}> 
     <View style={{width: 26, height: 26, 
      backgroundColor: 'green'}} /> 
     </View> 
    </View> 
    </View>