2017-03-22 3 views
7

react-native의 LayoutAnimation을 사용하여 사용자 지정 스위치 구성 요소를 구현하고 있습니다.React-Native : LayoutAnimation

enter image description here

그래서 같은 LayoutAnimation를 사용하여 원의 움직임을 애니메이션 오전 :

componentWillUpdate() { 
    let switchAnimation = { 
    duration: 250, 
    update: { 
     type: LayoutAnimation.Types.linear, 
     property: LayoutAnimation.Properties.opacity, 
    }, 
    }; 
    LayoutAnimation.configureNext(switchAnimation); 
} 

스위치는 자신의 구성 요소입니다. 그것은 CSS를 사용하여 왼쪽 또는 오른쪽에있는 원을 설정하는 소품을받습니다 (justifyContent 플렉스 - 시작 또는 플렉스 엔드)

내 생각에 스위치가 다른 구성 요소도 변경 값을 변경하면 문제가 있습니다 : 즉, 스위치 일부 텍스트가

위 애니메이션의 모든

변경)

1) 스위치

2

변경) 아이콘이

3

을 변경합니다 맞았다.

업데이트 : 애니메이션 API를 사용해 보았지만 애니메이션 속성을 지원하지 않는 것 같습니다. 애니메이션 API를 광범위하게 사용하는 사용자가 실제로 있습니까?

+0

여기서 LayoutAnimation은 올바른 방법이 아닙니다. 애니메이션 API 사용 고려 https://facebook.github.io/react-native/docs/animations.html –

+0

문서의 예는 구성 요소 상태를 사용합니다. 그게 내 사건에서 어떻게 작동할까요? 소품을 상태 변수에 매핑하고 거기에서 애니메이션을 만들어야합니까? –

답변

1

LayoutAnimation은 많은 작업을 수행합니다. 소스를 통해 기꺼이 이동하지 않는 한, 컨테이너의 원을 이동시키기 위해 여백 값을 설정하고 변경할 수 있습니다. 구성 요소 내에서 모든 계산을 수행하고 일부 스타일을 소품으로 표시 할 수 있습니다.

+0

감사. 유일하게 실행 가능한 솔루션처럼 보입니다. –

관련 문제