react-native(五)select下拉框组件及动画效果

动画效果分四步
使用组合动画需要注意要创建多个new Animated.Value(0)
1、导入Animated
2、创建动画组件
Animated.Image
Animated.ScrollView
Animated.Text
Animated.View

3、创建动画方法

Animated.timing(startvalues[index], {toValue: 1, duration: 300}).start()

4、触发方法，可以选择事件触发或者生命周期触发，只需要将3步代码放入对应事件或生命周期即可

5、绑定动画组件的某个样式，是选择渐显还是移动，不同动画绑定的样式不一样

下面代码下拉框组件
值得注意的是调用了父组件的一个方法，父组件的方法修改了this.state中的某个变量，用于存储下拉框选择的内容,同时为了保证下拉框中的内容同步，所以在下拉框组件中使用方法，一方面调用父组件的方法，一方面修改自己的this.state值。如果说使用父组件传递的参数，会造成运行周期死循环。

import React from 'react';
import {
    StyleSheet,
    Text,
    View,Animated
} from 'react-native';

export default class Selectcomponent extends React.Component{
    constructor(props){
        super()
        this.state = {
            options:props.options,
            label:props.label,
            text:null,
        }
    }

    render(){
        return <View style={styles.main}>
            <View>
            <Text onPress={this.presslabel} style={styles.options}>          {this.state.label}元      ↓</Text>{this.state.text}
            </View>
        </View>
    }

    presslabel = ()=>{
        let animatelist = []
        let startvalues = []
        this.setState({
            text:this.state.options.map((item,index)=>{
                startvalues.push(new Animated.Value(0))
                animatelist.push(Animated.timing(startvalues[index], {toValue: 1, duration: 300}))
                return <Animated.Text style={{opacity:startvalues[index],textAlign:'center',borderWidth:1,borderStyle:'solid',borderColor:'#ddd',width:100,height:35,lineHeight:35,}} key={index} onPress={this.setlabel.bind(this,item)}>{item}元</Animated.Text>
            })
        })
        Animated.sequence(animatelist).start()
    }

    setlabel = (item)=>{
        this.setState({
            label:item,
            text:null
        })
        this.props.setlabel(item)
    }
}

const styles = StyleSheet.create({
    main:{
        backgroundColor:'#fff',

    },
})