在React Native中制作动画不会增加组件的高度

时间:2019-01-22 10:10:36

标签: react-native react-animated

我有这个组成部分。在这种情况下,当我从axios调用中收到错误时,我希望组件高度增加。我在axios中捕获错误,在那里我使用了Animated(...)。start()
我遇到错误,然后使用 Animated(...)。start(),但无法正常工作。

import ... 


class Box extends Component{
    constructor(props){
        super(props)
        this.state = {
            boxHeight:new Animated.Value(0.01)
        }
        this.onSetCompany = this.onSetCompany.bind(this)
    }
    onSetCompany(data){ 
            axios.post(`${ip}api/check`,this.props.data)
                        .then((res)=>{
            this.props.navigation.navigate('dta')
            }).catch((e)=>{
                console.log('err')
                if(e){
                     Animated.spring(this.state.boxHeight, {
                                        toValue: 200,
                                    }).start();
                }
            })
    }
    render(){
        return(
            <View style={style.outerBox}>
                <View style={style.box}>
                    <View style={[style.date,{alignItems:'center'}]}>
                    <Text style={{textAlign:'center',fontSize:12,color:'#F11ABD'}}>{day[date.getDay()]}</Text>
                    </View> 
                    <TouchableOpacity style={style.details} onPress={()=>this.onSetCompany(this.props.data.c)}>
                        <Text style={style.cm}>{this.props.data.c}</Text>
                     </TouchableOpacity>
                    </View>
                        <Animated.View              //this should increase
                            style={{
                                backgroundColor:'#000',
                                height: this.state.boxHeight,
                            }}
                        >
                            <View style={{backgroundColor:'#000'}}>
                                <Text>You have error</Text>
                            </View>
                        </Animated.View>
                </View>
        )
    }
}

export default withNavigation(Box);


var style = StyleSheet.create({
    date:{
        width:100,
        height:66,
        padding:0,
        marginRight:10
    },box3:{
        flexDirection:'row',
  },box:{
        flexDirection:'row',
        padding:5,
        paddingTop:5,
        backgroundColor:'#fff',
        shadowColor: '#555',
        marginTop:10,
        borderRadius:5,
    shadowOffset: { width: 20, height: 5 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5,
        paddingBottom:5,
    },outerBox:{
        width:'80%',
        marginLeft:'10%',
        marginRight:'10%',
        marginBottom:10,        
    },details:{
        height:70,
        width:'100%',
        padding:1
    }

})

当我遇到错误时,当前的高度保持恒定。
有人可以帮忙吗?

0 个答案:

没有答案