技术控

    今日:395| 主题:58237
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 基础篇章:关于 React Native之 ActivityIndicator 组件的讲解

[复制链接]
林深处 投递于 2016-11-27 23:16:38
208 3
今天我们讲解的这个控件的非常简单,那就是ActivityIndicator,它替代了我们之前所说的那个ProgressbarAndroid,功能就是和ProgressbarAndroid一样,显示一个正在加载的状况和进度。
  官网上是这么形容我的:显示一个圆形loading提示。我们直接看属性吧。
  属性

  
       
  • animating bool 是否要显示这个加载指示器,默认true是显示,false隐藏   
  • color 指示器圆圈的前景色,默认灰色   
  • size [ ‘small’, ‘large’ ] 指示器大小   
  • hidesWhenStopped bool ios独有 当没有加载动画的时候是否隐藏  
  实例展示

     由于太简单了,效果图也没什么,直接看吧,如下:
   

基础篇章:关于 React Native之 ActivityIndicator 组件的讲解

基础篇章:关于 React Native之 ActivityIndicator 组件的讲解-1-技术控-loading,效果图,return,import,指示器
    实例代码如下:
  1. importReact, { Component }from'react';
  2. import{
  3. AppRegistry,
  4. StyleSheet,
  5. ActivityIndicator,
  6. Text,
  7. View
  8. } from'react-native';
  9. exportdefaultclassActivityIndicatorDemoextendsComponent{
  10. render() {
  11. return(
  12. <View style={styles.container}>
  13. <ActivityIndicator
  14. size="large"
  15. color="#0000ff"
  16. />
  17. <ActivityIndicator
  18. style={{marginTop:30}}
  19. size="small"
  20. color="#ff00ff"
  21. />
  22. </View>
  23. );
  24. }
  25. }
  26. const styles = StyleSheet.create({
  27. container: {
  28. flex: 1,
  29. justifyContent: 'center',
  30. alignItems: 'center',
  31. backgroundColor: '#F5FCFF',
  32. },
  33. });
  34. AppRegistry.registerComponent('ActivityIndicatorDemo', () => ActivityIndicatorDemo);
复制代码



上一篇:forkp多进程程序管理库的轮子
下一篇:H5 的复制操作
这个世界 投递于 2016-11-29 05:36:10
不要和地球人一般见识.
回复 支持 反对

使用道具 举报

胡梦玲 投递于 2016-12-4 13:16:29
当你的眼泪忍不住要流出来的时候,睁大眼睛,千万别眨眼,你会看到世界由清晰到模糊的全过程
回复 支持 反对

使用道具 举报

贾一兰 投递于 2016-12-5 07:22:41
大学就是大概学学!
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表