RN 设置图片Image圆角,支持某个角设置

关键逻辑,父视图设置    overflow:'hidden' 属性进行处理

import React, { Component } from 'react';

import {

  AppRegistry,

  Image,

  View,

  StyleSheet

} from 'react-native';

class ImageBorder extends Component

{

    render(

      View style={styles.container}

             Image style ={styles.imageStyle}  source={require('./img/xxxxxxx.png')}

     View

    )

    {

    return (

    )

    };

};

const styles = StyleSheet.create({

    container: {

    backgroundColor:'red',

    borderTopLeftRadius:20,

    overflow:'hidden',

    height: 200,

    marginLeft:100,

    width: 200,

    borderTopRightRadius:20

    ,

    },

    imageStyle: {

      padding: 10,

      fontSize: 18,

      height: 200,

      width: 200

    }

  })

  module.exports = ImageBorder

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容