React-Native Best Animated LinearGradient
npm install react-native-lingradient``js
npm install react-native-linear-gradient --save
react-native link react-native-linear-gradient
npm install react-native-lingradient
`
js
import Lingradient from 'react-native-lingradient'export default class Index extends React.Component {
constructor(p) {
super(p)
this.state = {
title:'1단계',
locations: [ 0, 0.33, 0.33, 1 ],
colors: ['#FE608B','#DB9BE8','#F4F4F4','#F4F4F4'],
}
}
componentDidMount(){
setTimeout(()=>{
this.setState({
title:'2단계',
locations: [ 0, 0.66, 0.66, 1 ],
colors: ['rgb(254,185,143)','rgb(240,97,95)','#F4F4F4','#F4F4F4'],
})
},2000)
setTimeout(()=>{
this.setState({
title:'3단계',
locations: [ 0, 1, 1, 1 ],
colors: ['rgb(109,96,210)','rgb(213,144,233)','#F4F4F4','#F4F4F4'],
})
},4000)
}
render() {
return (
{this.state.title}
colors={this.state.colors}
locations={this.state.locations}
style={{
flex: 1
}}
start={{x: 0.0, y: 0}}
end={{x: 1, y: 0}}
duration={300}
/>
)
}
}
``