javascript - React/React Native onLayout 用于 subview

Question

我希望构建一个按钮/ View ，当用户点击并按住它时，它会呈现动画效果。此动画只是颜色从白色逐渐变为绿色。我找到了一个教程，正是这样做的:

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

在render函数中，作者使用了:

<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 提及...一个在父 View 中，另一个在 View 大约一半的地方

它的工作方式是 onLayout 调用应该获取 TouchableWithoutFeedback 按钮的大小，以便我可以将动画设置为具有正确的大小。但是，无论我尝试什么，第二个 onLayout 调用都不会被调用。正在调用最顶层 View 的 onLayout，所以我知道我的代码很好(因为 this.onPageLayout 和 this.onPageLayout2 是精确的副本，除了它们的 console.logs 略有不同)。

如果我删除所有周围的代码并且在此渲染函数中只有内部 View ，那么 onLayout={this.onPageLayout2} 就像一个魅力，但是一旦我将其余的父项放回去，它不再有效。

有谁知道如何让子 View 的 onLayout 方法起作用？或者为了我的动画目的而获取 TouchableWithoutFeedback 按钮的大小？

谢谢!

Answer 1

您正在使用 TouchableWithoutFeedback，因此您不会从它的 child 那里得到任何反馈。将其更改为其他按钮，例如:TouchableOpacity，然后您可以为两个组件设置 onLayout。