react-native(리액트 네이티브) component - ProgressBarAndroid

react-native(리액트 네이티브) component - ProgressBarAndroid

const ProgressBar = require('ProgressBarAndroid')

const React = require('React')

const ReactNative = require('react-native')

const createReactClass = require('create-react-class')

const {Text, View} = ReactNative

const TimerMixin = require('react-timer-mixin')

const MovingBar = createReactClass({

displayName: 'MovingBar',

mixins: [TimerMixin],

getInitialState() {

return {

progress: 0.0,

}

},

componentDidMount() {

this.setInterval(() => {

const progress = (this.state.progress + 0.2) % 1

this.setState({progress})

}, 1000)

},

render() {

return <ProgressBar progress={this.state.progress} {...this.props} />

},

})

class ProgressBarAndroidExample extends React.Component {

static title = '<ProgressBarAndroid>'

static description = 'Horizontal bar to show the progress of some operation'

render() {

return(

<View>

<Text>Horizontal Indeterminate ProgressBar</Text>

{}

<ProgressBar styleAttr="Horizontal" />

<Text>Horizontal ProgressBar</Text>

<MovingBar styleAttr="Horizontal" indeterminate={false} />

<Text>Horizontal Black Indeterminate ProgressBar</Text>

{}

<ProgressBar styleAttr="Horizontal" color="black" />

<Text>Horizontal Blue ProgressBar</Text>

<MovingBar

styleAttr="Horizontal"

indeterminate={false}

color="blue"

/>

<View>

<Text>basic, etc...</Text>

<ProgressBar />

<ProgressBar styleAttr="Horizontal" color='pink'/>

<ProgressBar styleAttr="Horizontal" color="#2196F3" />

<ProgressBar

styleAttr="Horizontal"

indeterminate={false}

progress={0.5}

/>

<ProgressBar styleAttr="Normal" color='red'/>

<ProgressBar styleAttr="Small" />

<ProgressBar styleAttr="Large" />

<ProgressBar styleAttr="Inverse" />

<ProgressBar styleAttr="SmallInverse" />

<ProgressBar styleAttr="LargeInverse" />

</View>

</View>

)

}

}

module.exports = ProgressBarAndroidExample