ReactNative：画像

Question

オーバーテキストオーバーフロー私はこの結果を取得しようとは：m

これまでのところ私はこの1つ達成：あなたが見ることができるように、円を

をテキストが正しく表示されません。ここで

が私のコードです：

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

オーバーフロー属性は、私はそれを削除した場合、結果は同じまま、多くのことを行うようには見えませdoesnの。

ありがとうございました。だからここ

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>