绝对定位在反应本机

问题描述：

我正在建设我的第一个应用程序与原生反应。我正在尝试创建一个可重复使用的徽章组件，它应该在我的应用程序的不同部分作为通知者或计数器进行通知。下面的图片解释更多。绝对定位在反应本机

我想实现的对话泡泡的右上角的红色圆圈，要做到这一点，我想我必须元素位置，以绝对的，我有，但只有该元素仍然在它的父元素中创建一个空间，就好像它在相对位置时一样，但它仍然移动到右上角，我跳得很清楚？这是我的造型代码。

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

想知道我在这里错过什么，谢谢！

我发现是什么原因造成这一点，同时发展反应缓存的快速重装（我用热重装）项目。为了清除缓存，我必须重新启动我的反应原生服务器，并添加重置缓存选项，如之后的“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>

绝对定位在反应本机

相关推荐