絕對定位在反應本機

我正在建設我的第一個應用程序與原生反應。我正在嘗試創建一個可重複使用的徽章組件，它應該在我的應用程序的不同部分作爲通知者或計數器進行通知。下面的圖片解釋更多。絕對定位在反應本機

我想實現的對話泡泡的右上角的紅色圓圈，要做到這一點，我想我必須元素位置，以絕對的，我有，但只有該元素仍然在它的父元素中創建一個空間，就好像它在相對位置時一樣，但它仍然移動到右上角，我跳得很清楚？這是我的造型代碼。

style:{ 
    position: 'absolute', 
    zIndex: 1, 
    right:0, 
    top:0 
    alignItems: 'center', 
    justifyContent: 'center', 
    width: 24, 
    height: 24, 
    backgroundColor:'#ffff00', 
    color: '#ffffff', 
    borderRadius: 30 
}

想知道我在這裏錯過什麼，謝謝！

來源

2016-12-01 Daniel Barde

我發現是什麼原因造成這一點，同時發展反應緩存的快速重裝（我用熱重裝）項目。爲了清除緩存，我必須重新啓動我的反應原生服務器，並添加重置緩存選項，如之後的「react-native start --reset-cache」，這是一個愚蠢的錯誤，我必須說。 :( –

希望這將有助於

<View style={{position: 'relative'}}> 
    <Image /> //CommentIcon 
    <View style={{position: 'absolute', right: 0, top: 0, borderRadius: 5, height: 10, width: 10, backgroundColor: '#00ff00'}}> 
     <Text> 3 </Text>      
    </View> 
</View>

來源

2017-11-22 10:04:47

絕對定位在反應本機

回答

相關問題