Question

我正在使用自定义组件，并努力为其添加onPress功能。我希望只是在组件中添加一个onPress标签，然后将一个函数绑定到该组件上......但似乎无法在任何地方找到如何操作。

我也尝试过使用TouchableHighlight，但是当我这样做时，整个元素都会消失。我认为它仍然呈现，因为它仍然记录自定义组件已创建。但我无法弄清楚如何更改样式以使自定义组件仍显示在视图中...

这是我的代码：

    <TouchableHighlight>
<CustomEle
    thumbnailSource={{ uri: 'http://i.imgur.com/W3LKLla.png?bust' + Math.random() }}
    imageSource={{ uri: 'http://i.imgur.com/741u15U.png?bust' + Math.random() }}
    style={{ flex: 1, alignItems: 'stretch' }}
  />
</TouchableHighlight>

任何帮助或建议都是一种生活方式！谢谢！

渲染方法：

render() {
    return (
      <TouchableOpacity onPress={this.callThisFunction.bind(this)}>

      <View onPress={this.onBoom()} style={this.props.style}>
        <Image
          resizeMode="cover"
          style={[styles.image, this.props.style]}
          source={this.props.placeHolderSource}
        />
        <Animated.Image
          resizeMode="cover"
          style={[styles.image, { opacity: this.state.thumbnailOpacity }, this.props.style]}
          source={this.props.thumbnailSource}
          onLoad={() => this.onLoadThumbnail()}
          blurRadius={this.props.thumbnailBlurRadius}
        />
        <Animated.Image
          resizeMode="cover"
          style={[styles.image, { opacity: this.state.imageOpacity }, this.props.style]}
          source={this.props.imageSource}
          onLoad={() => this.onLoadImage()}
        />
        </View>
                </TouchableOpacity>

    )

Answer 1

在自定义组件中，将组件包裹在TouchableOpacity或TouchableHighlight周围，然后在单击组件时调用函数。因此，在您的情况下，我们将其称为CustomEle并致电callThisFunction。

class CustomEle extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.callThisFunction.bind(this)}>
            <Text>Button</Text>
        </TouchableOpacity>
      </View>
    );
  }

  callThisFunction(){
    //Do somthing here
  }
}

添加onPress方法/可触摸突出显示

1 个答案: