목차
접기
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
'IT 유용한 정보' 카테고리의 다른 글
[ typescript ] filter 함수 사용법 2가지 (0) | 2021.01.31 |
---|---|
dddd (0) | 2021.01.29 |
typescript 기억하기 (0) | 2021.01.26 |
[ node.js ] node.js를 설치했는데 버전이 확인되지 않을 때, (0) | 2021.01.26 |
[ react-native ] 함수 기초 사용법 () => {} , this.setState (0) | 2021.01.25 |