关于Android上overflow的显示问题



  • 设置绝对布局显示右上角的Image,ios模拟器显示正常,Android模拟器不能正常显示,效果如下:
    ios:
    0_1498457240981_屏幕快照 2017-06-26 下午1.59.19.png
    android:
    0_1498457273695_屏幕快照 2017-06-26 下午1.59.49.png
    请注意左上角的Image.
    关键代码如下:

    
    	// 商品picture
    	_renderTopImage(): React.Component {
    
        	const {goods} = this.state;
        	const {picture, goodsType} = goods;
    
            let icon = null;
            if (parseInt(goodsType) === 1) {
                icon = promotionIcon;
            }else if (parseInt(goodsType) === 2) {
                icon = specialIcon;
            }
    
        	return(
    			<View style={styles.imgContainer}>
    				<CachedImage
    					style={styles.image}
    					source={{uri: picture}}
    				/>
    				<Image
    					source={icon}
    					style={styles.icon}
    				/>
    			</View>
    		);
    	}
    

    style设置如下:

        content: {
            height: 333,
    		overflow: 'visible',
            backgroundColor: '#ffffff'
        },
    
    	top: {
    		height: 100,
    		flexDirection: 'row',
            overflow: 'visible',
            paddingHorizontal: 10,
        },
    
        imgContainer: {
            position: 'absolute',
            top: -15,
    		left: 15,
            padding: 2,
            borderRadius: 5,
    		overflow: 'visible',
            backgroundColor: 'rgba(245, 245, 245, 0.92)',
        },
    
    	image:{
    		width: 100,
    		height: 100,
    		borderRadius: 5,
            resizeMode: Image.resizeMode.contain,
        },
    
        icon: {
            width: 30,
            height: 30,
            bottom: -5,
            left: -5,
            position: 'absolute',
            resizeMode: Image.resizeMode.contain,
        },
    

    经过测试得出结论,当去掉style中所有的backgroundColor和borderRadius后,Android中能够完整的显示Image,但是没有背景色是个问题,不知道哪位大神有解决方法?求指教