javascript - React Native 中的绝对定位

Question

我正在使用 React 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>