ReactNative：文本溢出图像

Question

我正在尝试得到这个结果：

到目前为止我实现了这一目标:

如您所见，带文字的圆圈显示不正确。

这是我的代码：

<View style={{overflow:'visible'}}>
    <Image style={{flex:1, width:20, height:20, marginRight:20}} source={require('./assets/icon-caddy.png')}>
      <View style={{ flex:1, flexDirection:'row', backgroundColor:'#88b148', width: 15, height:15 , position:'absolute', left: 5, top:-5, backgroundColor:'#88b148', borderRadius:50, alignItems:'center', justifyContent:'center'}}>
        <Text style={{color:'#fff', fontSize:10 }}>0</Text>
      </View>
    </Image>
  </View>

overflow 属性似乎没什么用，如果我删除它，结果保持不变。

谢谢你的帮助。

Answer 1

所以这里是解决方案感谢这个代码：https://rnplay.org/apps/rpv82A

<View style={{flex:1, height:40, width:40, justifyContent:'center', alignItems:'center'}}>
          <Image style={{width:40}} source={require('./assets/icon-caddy.png')}/>
              <View style={{backgroundColor:'#88b148', borderRadius:50,position:'absolute',flex:1, justifyContent:'center',alignItems:'center', top: 0, left: 50}}>
                <Text style={{ color:'#fff', fontSize:8, margin:3 }}>20</Text>
              </View>
      </View>

ReactNative：文本溢出图像

ReactNative: Text overflow over image

html

overflow

react-native