다음과 같이 기본 TouchableOpacity onPress에 문제

Question

내가 간단한 아이콘 버튼이 반작용 :

class SideIcon extends Component { 
    render() { 
    return (
     <TouchableOpacity onPress={console.log('puff')} style={styles.burgerButton}> 
     <Icon name="bars" style={styles.burgerIcon}/> 
     </TouchableOpacity> 
    ); 
    } 
} 

그것은 다음과 같은 구성 요소에서라고 :

export default test = React.createClass({ 
    getInitialState: function() { 
    return { 
     isModalOpen: false 
    } 
    }, 

    _openModal() { 
    this.setState({ 
     isModalOpen: true 
    }); 
    }, 

    _closeModal() { 
    this.setState({ 
     isModalOpen: false 
    }); 
    }, 
    render() { 
    return (
    <View style={styles.containerHead} keyboardShouldPersistTaps={true}> 
    **<SideIcon openModal={this._openModal} closeModal={this._closeModal} />** 
     <Text style={styles.logoName}>DareMe</Text> 
     <SideBar isVisible={this.state.isModalOpen} /> 
    </View> 
    ); 
    } 
}); 

그러나 TouchableOpacity에 onPress 결코 작동하지 않습니다. 나는 어디가 잘못 될까? 그것은 비록 구성 요소를로드하는 동안 콘솔 진술을 보여 주지만.

Answer 1

코드를 호출하는 함수를 바인딩해야합니다. 예를 들어

:

<TouchableOpacity onPress={() => console.log('puff')} style={styles.burgerButton}> 
    <Icon name="bars" style={styles.burgerIcon}/> 
</TouchableOpacity> 

더 좋은 방법은 구성 요소 기능

class SideIcon extends Component { 
    handleOnPress() { 
    console.log('puff') 
    } 
    render() { 
    return (
     <TouchableOpacity onPress={this.handleOnPress} style={styles.burgerButton}> 
     <Icon name="bars" style={styles.burgerIcon}/> 
     </TouchableOpacity> 
    ); 
    } 
} 

로 그것을 기준을 제공하는 것이다