React Native之进度条ProgressViewIOS的使用

import React,{Component}from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ProgressViewIOS,
} from 'react-native';
class TabBarIOSDemo extends Component {
render() {
return (
<View>
<Text style={styles.welcome}>
ProgressViewIOS使用实例
</Text>
<ProgressViewIOS style={styles.progressView} progress={0.3}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={0.2}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={0.4}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={0.6}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={0.8}/>
</View>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
marginTop: 20,
},
progressView: {
marginTop: 20,
marginLeft:10,
marginRight:10,
}
});
AppRegistry.registerComponent('Allen', () => TabBarIOSDemo)
可以设定颜色,百分比,款式等
React Native之进度条ProgressViewIOS的使用的更多相关文章
- React Native自定义导航条
Navigator和NavigatorIOS 在开发中,需要实现多个界面的切换,这时候就需要一个导航控制器来进行各种效果的切换.在React Native中RN为我们提供了两个组件:Navigator ...
- react 实现圆环进度条
import React, { useState, useEffect } from "react" import { css } from "emotion" ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native 常用插件案例
(二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...
- React Native开发技术周报2
(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...
- 【React Native开发】React Native控件之ProgressBarAndroid进度条解说(12)
),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...
- react封装简单的浏览器顶部加载进度条全局组件
在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...
- Vue/React圆环进度条
数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...
随机推荐
- 万恶之源 - Python文件操作
文件操作 初始文件操作 使用Python来读写文件是非常简单的操作,我们使用open()函数来打开一个文件,获取到文件句柄,然后通过文件句柄就可以进行各种各样的操作了 根据打开方式的不同能够执行的操作 ...
- [dt]世纪历史长河年代表
年代口诀 夏商与西周, 东周分两段, 春秋和战国, 一统秦两汉, 三分魏蜀吴, 二晋前后延, 南北朝并列, 隋唐五代传, 宋元明清后, 皇朝至此完. 中国历史长河年代表 参考: 中国历史朝代顺序表.年 ...
- 012-centos6.5配置静态ip
文件名为:ifcfg-eno16777736 DEVICE=eno16777736TYPE=EthernetONBOOT=yesNM_CONTROLLED=noBOOTPROTO=staticIPAD ...
- css3实现头像旋转360度
css样式: .div a img{ width: 88px; height: 88px; border-radius: 88px; transition: all 1.2s ease-out 0s; ...
- uva10905
/* 很好的字符串 比较方法 很多个字符串 组成的 数字 需要最大 然后 比较 a和b 是 比较a+b 和b+a 的大小 */ #include<cstdio> #include<s ...
- [備註] 安裝與整合 xUnit 測試框架@VS2012
開發環境:Visual Studio 2012, Update 1 (必須). 說明:VS2012 已整合各測試框架的 Test Runner,包括 NUnit, xUnit 等.藉由標準的介面,可讓 ...
- linux常用命令:ifconfig 命令
许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...
- Google、亚马逊、微软 、阿里巴巴开源软件一览
Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...
- 基于Spring Cloud的微服务落地
微服务架构模式的核心在于如何识别服务的边界,设计出合理的微服务.但如果要将微服务架构运用到生产项目上,并且能够发挥该架构模式的重要作用,则需要微服务框架的支持. 在Java生态圈,目前使用较多的微服务 ...
- 干货:Java并发编程系列之volatile(二)
接上一篇<Java并发编程系列之synchronized(一)>,这是第二篇,说的是关于并发编程的volatile元素. Java语言规范第三版中对volatile的定义如下:Java编程 ...