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;

React Native 椭圆虚线背景框相关推荐

React Native之虚线dashed属性在Android机不兼容问题解决
borderStyle:"dashed" 在安卓机上无效果.iOS中可以正常显示虚线:但是安卓只能显示为实线. 我的解决办法: lineOne:{width:25,height:0 ...
[RN] React Native 自定义底部弹出选择框实现
React Native 自定义底部选择框实现效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...
React Native初探
React Native初探转自:博客园叶小钗前言很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP ...
React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
android TextView下划线，圆角边框，数逐字显示，虚线边框，渐变色背景框，阴影背景框
长方形 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="h ...
初步了解React Native的新组件库firstBorn
first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...
从零学React Native之07View
View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始, ...
【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...
beeshell —— 开源的 React Native 组件库
背景 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

React Native 椭圆虚线背景框

React Native 椭圆虚线背景框相关推荐

最新文章

热门文章