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圆环进度条
数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...
随机推荐
- spring boot配置service发布服务
在application.yml中配置 server: port: 8080 context-path: /crm spring: datasource: driver-class-name: com ...
- Chrome插件汇总
Chrome浏览器可以增加很多插件,帮助我们更方便地使用. 1 重新定位新标签页 名字:Infinity.crx 官网:http://www.infinitynewtab.com/ 效果图如下: ...
- 1.keras实现-->自己训练卷积模型实现猫狗二分类(CNN)
原数据集:包含 25000张猫狗图像,两个类别各有12500 新数据集:猫.狗 (照片大小不一样) 训练集:各1000个样本 验证集:各500个样本 测试集:各500个样本 1= 狗,0= 猫 # 将 ...
- 手把手教你,C#.Net如何用Log4net把错误日志写入到SQLite数据库中
在项目中,我们往往会有把错误日志记录下来的习惯,这样有利于当网站发布后,能第一时间找到错误的所在地,以及错误的原因,以便于我们第一时间纠错.往往我们会把错误日志直接写到txt文本中,虽然操作简单,但是 ...
- Python: 用shell通配符匹配字符串,fnmatch/fnmatchcase
问题:想使用Unix Shell 中常用的通配符(比如*.py , Dat[0-9]*.csv 等) 去匹配文本字符串 解决方案: 1. fnmatch 模块提供了两个函数—— fnmatch() 和 ...
- HashMap、HashTable、ConcurrentHashMap的区别
一.相关概念 1.Map的概念 javadoc中对Map的解释如下: An objectthat maps keys to values . Amap cannot contain duplicate ...
- python插入排序算法总结
插入排序算法总结: 插入算法的核心是 每次循环到一个数时,都认为这个数之前的数列都是排好序的,将一个数插入到已经排好序的有序数列中,从而得到一个新的.个数加一的有序数列. 过程:从第一个元素开始,第一 ...
- nginx 安装步骤
1. 下载nginx,网址:http://nginx.org/download/ 2. 解压 tar -xzvf nginx-1.6.2.tar.gz 3. 建立映像文件:mount -t iso96 ...
- 查看.mobileprovision 详细信息
.mobileprovision 用诸如sublime 等工具是无法打开. 可以通过shell命令查看: security cms -D -i 某某.mobileprovision
- Linux中Postfix反病毒和垃圾邮件工具(十)
amavisd-new amavisd-new呼叫器是一个连接MTA和内容检测工具(诸如病毒扫描工具和SpamAssassin)的高性能接口程序,使用perl语言写成.它一般通过SMTP.ESMTP或 ...