ReactNative: Text Überlauf über das Bild

Question

ich versuche, dieses Ergebnis zu erhalten:

Bisher erreichte ich dieses:

Wie Sie sehen können, den Kreis mit Text wird nicht korrekt angezeigt.

Hier ist mein Code:

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

Das Überlauf Attribut scheint doesn nicht viel zu tun, wenn ich ihm das Ergebnis bleibt gleich entfernen.

Danke für Ihre Hilfe.

Answer 1

So, hier ist die Lösung dank diesem Code: 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>