React Native中的绝对定位

Question

我正在用native native构建我的第一个应用程序。 我正在尝试创建一个可重复使用的徽章组件，该组件应该作为通知程序或计数器用于我的应用程序的不同部分的通知。 下图说明了更多内容。

我正在尝试在讲话气泡的右上角实现红色圆圈，为了做到这一点，我想我必须将元素定位到绝对，并且我只有元素仍然在其父元素中创建一个空间元素好像它是相对位置，而它仍然移动到右上角，我跳得很清楚？ 这是我的造型代码。

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

很想知道我在这里缺少什么，谢谢！

Answer 1

希望它会有所帮助

<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>