ReactNative设置 Image容器的圆角背景

最新推荐文章于 2024-09-21 13:55:10 发布

非鹭千里

最新推荐文章于 2024-09-21 13:55:10 发布

阅读量1.3w

点赞数

分类专栏： HTML5/Android混合

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/dodan/article/details/52294403

版权

HTML5/Android混合专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<View style={[styles.wholeContainer,{height: 102}]}>
    <Image style={[styles.cardBgContain,{alignItems: 'center', paddingBottom: 12}]}
           source={require('../img/blue_card_bg_s.png')}> 	 //这个Image控件作背景图
    </Image>
    <View style={[styles.cardBg,{alignItems: 'center', paddingBottom: 12}]}>
        <TouchableWithoutFeedback >
            <Image style={styles.portrait}   source={avatarImg}/>
        </TouchableWithoutFeedback>

        <TouchableWithoutFeedback >
            <View>
                <Text style={styles.userInfo_no_eAccount_text}>
                    .啦啦啦..
                </Text>
            </View>
        </TouchableWithoutFeedback>
        <Image  source={require('../img/more_detail_icon.png')}/>
    </View>
</View>

wholeContainer: {
    flex: 1,
    backgroundColor: Color.White,
    alignItems: 'center',
    justifyContent: 'flex-end',
},

cardBg: {//蓝色卡片背景
    resizeMode: 'stretch',
    width: kCardBgWidth,
    alignItems: 'stretch',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginBottom: 0,
    position: 'absolute',
    left: 10,
    right: 0,
    top: 25,
},
cardBgContain: {//卡片容器
    resizeMode: 'stretch',
    width: kCardBgWidth,
    alignItems: 'stretch',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginBottom: 0,
},