关于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,但是没有背景色是个问题,不知道哪位大神有解决方法?求指教


  • administrators


登录后回复