aa.gif
用Native 做右邊的箭頭旋轉(zhuǎn)效果鞋囊，應該是件很簡答的事情峡碉，但是用React Native就需要花費時間考慮下。由于這個控件很常用盐股，所以應該做個封裝钱豁，任何時候調(diào)用都可以。
React Native做簡單動畫使用框架內(nèi)Animated就可以了疯汁，更高級的動畫牲尺，可以去Google上查。下面就是封裝這個控件的關(guān)鍵點：
1.封裝的控件代碼
changeRorateValue (){
this.changeValue+=180;
Animated.timing( // Animate over time
this.state.rotateValue, // The animated value to drive
{
toValue: this.changeValue, // Animate to opacity: 1 (opaque)
duration: 400, // Make it take a while
}
).start(()=>
this.state.rotateValue.setValue(this.changeValue)
);
}
render() {
return (
<TouchableOpacity onPress={
()=>{
this.changeRorateValue()
}} >
<View style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: (this.props.setBackgroundColor) ? this.props.setBackgroundColor : this.props.defaultColor,
width: (this.props.setWidth !== 0) ? this.props.setWidth : 60,
height: (this.props.setHeight !== 0) ? this.props.setHeight : 20,
}}
>
<Animated.Image style={[{width:16,height:9, transform: [{
rotate: this.state.rotateValue
.interpolate({ inputRange: [0, 360], outputRange: ['0deg', '360deg'] })
}]}]}
source={require('../images/Down_Arrow.png')}
/>
</View>
</TouchableOpacity>
);
}
我們要定義一個外部可調(diào)用方法 changeRorateValue ()幌蚊，還需要 <TouchableOpacity onPress={
()=>{
this.changeRorateValue()
}} >留一個回調(diào)給外部控件使用
2.外部控件的調(diào)用
<TouchableOpacity style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }} onPress={() => {
this.test()
}}>
<Text style={{ flex: 1 }}>獲獎項目</Text>
<Text>{this.state.isTurnDown ?"展開":"收起"}</Text>
<RotateArrowTwo ref='RotateArrow' setBackgroundColor='#999999' setWidth={16} setHeight={11} buttonName='ggsmifaf'
block={() => {
this.updateRotate()
}}
></RotateArrowTwo>
</TouchableOpacity>
updateRotate() {
let result = !this.state.isTurnDown ;
this.setState({
isTurnDown:result
})
this.refs.RotateArrow.changeRorateValue();
}
這里注意使用的ref谤碳，這樣的話能保證封裝的這個控件的獨立性。
如果需要源碼的朋友溢豆，可以在評論區(qū)留言蜒简，如有不對之處，還望指正漩仙。
