mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-03-29 00:38:18 +08:00
7705f521c8
* Change 'accessible' to align with React Native. * Add support for 'importantForAccessibility'. * Stop event propagation for keyboard-activated Touchables (nested Touchables now respond the same as when touch-activated). * Fix whitespace layout of nested Text elements. * Use 'div' for Text to improve TalkBack grouping. * Rewrite accessibility docs. Close #382 Fix #408
71 lines
1.3 KiB
Markdown
71 lines
1.3 KiB
Markdown
# ActivityIndicator
|
|
|
|
## Props
|
|
|
|
[...View props](./View.md)
|
|
|
|
**animating**: boolean = true
|
|
|
|
Whether to show the indicator or hide it.
|
|
|
|
**color**: ?color = '#1976D2'
|
|
|
|
The foreground color of the spinner.
|
|
|
|
**hidesWhenStopped**: ?boolean = true
|
|
|
|
Whether the indicator should hide when not animating.
|
|
|
|
**size**: ?enum('small, 'large') | number = 'small'
|
|
|
|
Size of the indicator. Small has a height of `20`, large has a height of `36`.
|
|
|
|
## Examples
|
|
|
|
```js
|
|
import React, { Component } from 'react'
|
|
import { ActivityIndicator, StyleSheet, View } from 'react-native'
|
|
|
|
class ToggleAnimatingActivityIndicator extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = { animating: true }
|
|
}
|
|
|
|
componentDidMount: function() {
|
|
this.setToggleTimeout();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<ActivityIndicator
|
|
animating={this.state.animating}
|
|
size="large"
|
|
style={[styles.centering, { height: 80 }]}
|
|
/>
|
|
);
|
|
}
|
|
|
|
_setToggleTimeout() {
|
|
setTimeout(() => {
|
|
this.setState({ animating: !this.state.animating })
|
|
this._setToggleTimeout()
|
|
}, 1200)
|
|
}
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
centering: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
gray: {
|
|
backgroundColor: '#cccccc'
|
|
},
|
|
horizontal: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around'
|
|
}
|
|
})
|
|
```
|