Question

我希望构建一个按钮/视图，当用户点按并按住它时会动画。这个动画只是颜色从白色到绿色的渐进变化。我找到了一个完全正确的教程：

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按钮的大小？

谢谢！

Answer 1

您正在使用TouchableWithoutFeedback，因此您无法从其孩子那里获得任何反馈。将其更改为其他按钮，例如：TouchableOpacity，然后您可以为这两个组件设置onLayout。

针对子视图的React / React Native onLayout

1 个答案: