添加onPress方法/可觸摸高亮

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方法：

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