我有这个组成部分。在这种情况下,当我从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
}
})
当我遇到错误时,当前的高度保持恒定。
有人可以帮忙吗?