文档章节

react-native-progress的使用

o
 osc_x4h57ch8
发布于 2018/04/24 11:09
字数 382
阅读 26
收藏 0

设置进度条及loading动画可以使用这个第三方react-native-progress,支持条形及环形,官方显示demo图片如下

GitHub地址为:https://github.com/imartingraham/react-native-progress

这个组件有四种进度条:

  • Progress.Bar
  • Progress.Pie
  • Progress.Circle
  • Progress.CircleSnail

一  安装:

$ npm install react-native-progress --save

  1. 在ios上使用圆形进度条需要在Libraries目录下添加ART.xcodeproj,路径为node_modules/react-native/Libraries/ART,如图:

QQ20180104-160911@2x.png

QQ20180104-160636@2x.png

3.在Build Phases下找到Link Binary With Libraries,添加libART.a,如图:

QQ20180104-160516@2x.png

注:android系统npm完成后直接使用即可。

 

二  使用:

import React, {Component} from 'react';
import {StyleSheet, View, Text, InteractionManager} from 'react-native';
import {Actions, ActionConst} from 'react-native-router-flux';
import Button from "apsl-react-native-button"//自定义button
import {showMsg} from "../utils/Util"
import {getValue, save} from "../utils/FileUtil"
import NarBar from "../component/NarBar";

var Progress = require('react-native-progress');

export default class LoadingPage extends Component {
/**初始化数据*/
constructor(props) {
super(props);
this.state = {
progress: 0,
indeterminate: true,
};
}

/**初始*/
componentDidMount() {
this.animate();
}
animate(){
var progress = 0;
this.setState({ progress });
setTimeout(() => {
this.setState({ indeterminate: false });
setInterval(() => {
progress += Math.random()/5;
if(progress > 1) {
progress = 1;
}
this.setState({ progress });
}, 1000);
}, 1500);
}
/**结束*/
componentWillUnmount() {
}

render() {
return <View style={styles.base_view}>
<NarBar onSelect={() => {
Actions.pop()
}} title='loadingDemo'/>
<Text style={styles.welcome}>Progress Example</Text>
<Progress.Bar
style={styles.progress}
progress={this.state.progress}
indeterminate={this.state.indeterminate}
/>
<View style={styles.circles}>
<Progress.Circle
style={styles.progress}
progress={this.state.progress}
size={84} // 圆的直径
unfilledColor="rgba(255,255,255,0.5)" // 剩余进度的颜色
color={"#008aff"} // 颜色
thickness={6} // 内圆厚度
showsText={true}//显示进度比文字
textStyle={{fontSize:14,color:'red'}}//设置文字样式
// indeterminate={this.state.indeterminate}
/>
<Progress.Pie
style={styles.progress}
progress={this.state.progress}
indeterminate={this.state.indeterminate}
/>
<Progress.Circle
style={styles.progress}
progress={this.state.progress}
// indeterminate={this.state.indeterminate}
direction="counter-clockwise"
/>
</View>
<View style={styles.circles}>
<Progress.CircleSnail
style={styles.progress}
animating={this.state.indeterminate}//设置动画
hidesWhenStopped={true}//设置当停止动画时移除
/>
<Progress.CircleSnail
style={styles.progress}
color={[
'#F44336',
'#2196F3',
'#009688',
]}
/>
</View>

</View>;
}
}

var styles = StyleSheet.create({
base_view: {},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
circles: {
flexDirection: 'row',
alignItems: 'center',
},
progress: {
margin:10,
}

});

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

李开复谈2020年AI科学家创业。道翰天琼认知智能api机器人接口。

2012年至今,在深度学习推动下,这一波人工智能的蓬勃发展已进入第十个年头。 在初期,一系列由AI科学家创建的初创公司,经过大浪淘沙,如今已有多家脱颖而出成为独角兽企业;榜样在先,于是...

jackli2020
18分钟前
9
0
什么是PHP中的线程安全或非线程安全? - What is thread safe or non-thread safe in PHP?

问题: I saw different binaries for PHP, like non-thread or thread safe? 我看到了PHP的不同二进制文件,例如非线程还是线程安全的? What does this mean? 这是什么意思? What is the ...

fyin1314
31分钟前
26
0
移动社交如何玩?网易云信携手崽崽和Uki打造更多新场景!

随着95后、00后为主的年轻一代逐渐成为中国移动社交下的主力军,社交需求也发生了一些变化。这些年轻用户更倾向于有趣好玩,形式多样化的社交方式。同时也产生了如“扩列”、“养火花”等众多...

真正稳定的网易云信
38分钟前
22
0
如何在Java代码中去掉烦人的“!=null”

问题 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc();} 最终,项目中会存在大量判空代码,多么丑陋繁冗!如何避免这种情况?我们是否滥...

码农突围
39分钟前
21
0
ELK使用容器集成安装

ELK使用容器集成安装 1. 查看集成ELK:sebp docker search sebp 2. 设置内核参数 sysctl -w vm.max_map_count=262144 3. 拉取sebp/elk docker pull sebp/elk 4. 运行ELK yum install -y java......

huanke
48分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部