2017-05-10 7 views
1

사용자가 탭하여 고정 할 때 움직이는 버튼/뷰를 작성하려고합니다. 이 애니메이션은 색상이 흰색에서 녹색으로 점진적으로 변경됩니다. 내가 정확히 수행하는 튜토리얼 발견 : 렌더링 함수에서React/React Child 뷰의 네이티브 onLayout

http://browniefed.com/blog/react-native-press-and-hold-button-actions/

을, 저자는 사용

<View style={styles.container} onLayout={this.onPageLayout}> 
     <TouchableWithoutFeedback 
      onPressIn={this.handlePressIn} 
      onPressOut={this.handlePressOut} 
     > 
      <View style={styles.button} onLayout={this.onPageLayout2}> 
       <Animated.View style={[styles.bgFill, this.getProgressStyles()]} /> 
       <Text style={styles.text}>Press And Hold Me</Text> 
      </View> 
     </TouchableWithoutFeedback> 
     <View> 
      <Text>{this.state.textComplete}</Text> 
     </View> 
    </View> 

부모에 언급 onLayout 두 ... 하나가 있습니다 보기 및 다른보기에서 절반 정도 아래로보기

이 작동 방식은 onLayout 호출이 TouchableWithoutFeedback 단추의 크기를 가져와 설정하도록되어 있습니다. 애니메이션의 크기가 올바른지 확인하십시오. 그러나 두 번째 onLayout 호출은 내가 무엇을 시도하든 호출되지 않습니다. 맨 위 View의 onLayout이 호출되어서 내 코드가 좋다는 것을 알았습니다. (this.onPageLayout 및 this.onPageLayout2는 console.logs가 약간 씩 다른 경우를 제외하고는 똑같은 코드입니다).

주변의 모든 코드를 제거하고이 렌더링 기능에서만 내부보기가있는 경우 onLayout = {this.onPageLayout2}은 매력처럼 작동하지만 나머지 부모를 넣으면 곧바로 다시 표시됩니다. 더 이상 작동하지 않습니다.

누구나 아이를 가질 수있는 방법을 알고 있습니다. onLayout 메서드를 사용하려면 어떻게해야합니까? 또는 다른 방법으로 또는 내 애니메이션 용도로 TouchableWithoutFeedback 버튼의 크기를 가져 오는 중입니까?

감사합니다.

답변

1

귀하는 TouchableWithoutFeedback을 사용하고 있으므로 그 사람의 피드백을받지 못합니다. 다른 버튼 (예 : TouchableOpacity)으로 변경 한 다음 두 구성 요소에 대해 onLayout을 사용할 수 있습니다.

+0

나는 tmrw를 시도해 볼 수는 있지만, 내 질문에서 마지막 두 번째 단락을 보지 않는다면, TouchableWithoutFeedback을 아이가 아닌 한 사용할 수있게되었습니다. 다른 생각? 내일 내 결과를 알려 드리겠습니다. –

+0

아이를 태우는 'TouchableWithoutFeedback'에 대해서는 안됩니다. 아이가있는'TouchableWithoutFeedback'에 관한 내용입니다 :). TouchableWithoutFeedback의 자녀로부터 피드백을받을 수 없습니다. –

+0

좋아요 ... TouchableWithoutFeedback에 문제가있었습니다 ... 왜 여기에 아이의 크기를 얻을 수 없습니까? 나는 그것과 TouchableOpacity의 차이를 이해하지 못한다. –

관련 문제