React Native 椭圆虚线背景框

近日，在开发中有这样的需求，实现一个虚线的椭圆背景框，由于本人React Native 小白一枚，顿时两眼懵逼，赶紧查阅各种资料，发现React Native 自带支持 虚线，赶紧写个demo验证一下。下图是效果图

下面 是主要代码

class DashLine extends Component<Props>{

  constructor(props){
    super(props)
  }

  render(){
    return(<View style={styles.container}>
      <View >
      <Text style={{height:40,width:100,
      backgroundColor:'#eee',
      borderStyle:'dotted',// 虚线 效果
      borderWidth:2, //虚线 线宽
      borderColor:'#e8e8e8', // 虚线颜色
      borderTopLeftRadius:20 ,//设置 圆角 
      borderTopRightRadius:20,
      borderBottomLeftRadius:20,
      borderBottomRightRadius:20,
      justifyContent:'center',
      textAlign:'center',
      textAlignVertical:'center'}}>hello world!</Text>
      </View>
    </View>)
  }
}

const styles = StyleSheet.create({
  container:{
    width:'100%',
    height:'100%',
    alignItems:'center',
    justifyContent:'center'
  },
  text_bg:{
    marginTop:300,
    backgroundColor:'#fff',
    alignItems:'center',
    justifyContent:'center'
  }
})

export default DashLine;