< 返回技术文档列表

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

发布时间:2022-11-15 22:09:20⊙投诉举报

关键逻辑,父视图设置    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


/template/Home/Zkeys/PC/Static