内部带有自定义组件的 TouchableWithoutFeedback 不会触发 onPress 回调

Question

我做了一个DEMO

所以问题是第三个按钮不起作用。按钮之间的唯一区别是我在 Header 组件中传递它们的方式。

<Header secondButton={<View style={styles.button}><Text>Second Button</Text></View>}
        thirdButton={<ThirdButton />}
        onPress={this._handlePress} />

Answer 1

@brentvatne 在 github

上回答

I was able to fix it in this example - notice that I changed the <View> in your ThirdButton to include {...this.props}
<View style={styles.button} {...this.props}>
  .. etc
</View>
The reason for this is that TouchableWithoutFeedback will set responder props on that component, but ThirdButton is just a composite component with no backing UIView, so I want to pass those on to the View. See what I'm talking about here

Answer 2

我的解决办法是把这个...

<TouchableWithoutFeedback onPress={props.onPress}>
  <Contents {...props} />
</TouchableWithoutFeedback>

进入这个...

<TouchableWithoutFeedback onPress={props.onPress}>
  <View>
    <Contents {...props} />
  </View>
</TouchableWithoutFeedback>

内部带有自定义组件的 TouchableWithoutFeedback 不会触发 onPress 回调

TouchableWithoutFeedback with custom component inside doesn't fires onPress callback

javascript

reactjs

react-native