react-native试玩(5)-小菊花控件
ActivityIndicatorIOS小菊花控件,动态指示图标,一般在比较耗时的操作中使用,用来做用户友好性提示。 属性
函数
实例源码如下,我们会通过更改render函数中ActivityIndicatorIOS控件的属性,来一步一步了解小菊花。 'use strict';
var React = require('react-native');
var {
ActivityIndicatorIOS,AppRegistry,StyleSheet,View,} = React;
var helloworld = React.createClass({
render: function() {
return (
<ActivityIndicatorIOS /> ); } }); var styles = StyleSheet.create({ }); AppRegistry.registerComponent('hellowrold',() => helloworld);
以上代码我们重点关注 默认显示直接运行上面代码后的小菊花样式如下: 可以看到颜色为Gray,大小为 <ActivityIndicatorIOS
animating = {true}
hidesWhenStopped = {true}
size="small"
color="gray"
/>
修改animating我们现在想让其默认不转动,我们是不是可以通过将 <ActivityIndicatorIOS
animating = {false}
hidesWhenStopped = {true}
size="small"
color="gray"
/>
实际效果图: 我们的小菊花居然不见了,我们不是只让其不动么?出现这个情况的原因是 <ActivityIndicatorIOS
animating = {false}
hidesWhenStopped = {false}
size="small"
color="gray"
/>
修改size将size设置为 <ActivityIndicatorIOS
animating = {false}
hidesWhenStopped = {false}
size="large"
color="gray"
/>
修改color将小菊花的颜色设置为红色: <ActivityIndicatorIOS
animating = {false}
hidesWhenStopped = {false}
size="large"
color="red"
/>
我们也可以通过RGB的值来设置颜色: <ActivityIndicatorIOS
animating = {false}
hidesWhenStopped = {false}
size="large"
color="#00aa00"
/> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |