IT 유용한 정보

[ react-native ] animated , 옆으로 이동한다....

JooKit 주킷 2021. 1. 29. 22:54
목차 접기
728x90
반응형
import React, { Component, ReactNode } from 'react';  
import { View, Text, StyleSheet, Animated } from 'react-native';

export default class AniOne extends Component<any, any>  
{

constructor(props: any)  
{  
super(props);  
//this.state = new Animated.ValueXY(0, 0);  
this.state =  
{  
mySquare: new Animated.Value(0)  
}  
}

// render가 실행된 다음에 실행되는 함수.  
// 가장 마지막에 실행되는 함수로써, 마지막에 엔딩 포인트를 지정해주면 된다.  
componentDidMount()  
{  
Animated.timing(this.state.mySquare,  
{  
toValue: 100,  
duration: 3000,  
useNativeDriver: true  
}).start();  
}

render(): ReactNode  
{  
console.log('왜 안되니?????');  
console.log(this.state.mySquare.flex);  
const aniStyle = {  
transform: \[  
{ translateX : this.state.mySquare }  
\]  
}  
return (  

<Text style={{ marginTop: 200, fontSize: 30 }}>Hello  
<Animated.View style={\[aniStyle\] }>  

</Animated.View>  

)  
}  
}

const styles = StyleSheet.create({  
container:  
{  
flex: 1,  
backgroundColor: '#afafaf'  
},  
square:  
{  
width: 100,  
height: 100,  
backgroundColor: 'skyblue'  
}

});
  • 옆으로 이동한다.. 너비가 넓어지는게 아니라ㅠㅠ
728x90
반응형
LIST