子ビューのネイティブonLayoutをリアクションする/リアクションする

Question

ユーザーがタップして保持したときにアニメーション化するボタン/ビューを作成したいと考えています。このアニメーションは、白から緑の色への漸進的な変化に過ぎません。 ...親の1を

<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> 

2 onLayout言及がありますのでご注意ください：レンダリング機能で

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

、著者が使用しています。私は、まさにこのチュートリアルんを発見しましたビューと他の半分のビューで中途半端に表示

この方法では、onLayoutコールはTouchableWithoutFeedbackボタンのサイズを取得して設定できるようになっていますアニメーションが正しいサイジングを持つようにします。しかし、2回目のonLayoutコールは、私が何を試しても呼び出されません。上のViewのonLayoutが呼び出されているので、私のコードは良いです（this.onPageLayoutとthis.onPageLayout2は、console.logsが若干異なる以外は正確なコピーです）。

このレンダリング機能で周囲のコードをすべて削除して内部ビューのみを使用すると、onLayout = {this.onPageLayout2}は魅力的に機能しますが、残りの親を戻すとすぐに、それはもはや機能しません。

どのように私は子供のビューを得ることができます知っている彼らのonLayoutメソッドを動作させるには？または、私のアニメーションの目的のためにTouchableWithoutFeedbackボタンのサイズを取得するか、別の方法ですか？

ありがとうございます！

Answer 1

あなたはTouchableWithoutFeedbackを使用しているため、その子からのフィードバックはありません。たとえば、TouchableOpacityなどの他のボタンに変更します。次に、両方のコンポーネントにonLayoutを設定します。