OnPress가 Touchable Opacity에서 작동하지 않습니다.

Question

반응 네이티브에서 모바일 앱을 만들고 있습니다! 최근에 모든 페이지마다 고유 한 헤더 구성 요소를 작성합니다. 여기 내 머리글 구성 요소의 코드입니다. 그 구성 요소 안에 두 개의 아이콘이 있습니다. 그러나 불행히도이 버튼들은 전혀 작동하지 않습니다 !!

import React, {Component} from 'react'; 
import { 
    Text, 
    View, 
    Image, 
    Dimensions, 
    TouchableOpacity 
} from 'react-native'; 

import Icon from 'react-native-vector-icons/Ionicons'; 

import Styles from './Styles'; 

export default class ChatHead extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     } 
    } 

    render(){ 
    console.log(this.props.headerText, this.props); 
    if(this.props.headerText.length > 16){ 
     name = this.props.headerText.substr(0, 16); 
     name += "..."; 
    } 
    else name = this.props.headerText; 

    return(
     <View style={Styles.viewStyle}> 
     <Text style={Styles.nameStyle}>{name}</Text> 

     <TouchableOpacity 
      style={Styles.audioCallButton} 
      onPress={() => console.log("Audio Button Pressed")} 
     > 
      <Icon name={'md-call'} size={25} color="white" align='right'/> 
     </TouchableOpacity> 

     <TouchableOpacity 
      style={Styles.videoCallButton} 
      onPress={() => console.log("Video Button Pressed")} 
     > 
      <Icon name={'ios-videocam'} size={28} color="white" align='right'/> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
}; 

onPress에 전혀 응답하지 않습니다!

Answer 1

이 솔루션을 시도해보십시오.보기 내에 아이콘과 이름도 래핑했습니다.

import React, {Component} from 'react'; 
import { 
    Text, 
    View, 
    Image, 
    Dimensions, 
    TouchableOpacity 
} from 'react-native'; 

import Icon from 'react-native-vector-icons/Ionicons'; 

import Styles from './Styles'; 

export default class ChatHead extends Component { 
constructor(props) { 
    super(props); 

    this.state = { 
    } 
} 

render(){ 
return(
    <View style={Styles.viewStyle}> 
    <Text style={Styles.nameStyle}>{this.props.headerText.length > 16 ? 
`${this.props.headerText.substr(0, 16)}...` : this.props.headerText}</Text> 

    <TouchableOpacity 
     style={Styles.audioCallButton} 
     onPress={() => console.log("Audio Button Pressed")} 
    ><View> 
     <Icon name={'md-call'} size={25} color="white" align='right'/></View> 
    </TouchableOpacity> 

    <TouchableOpacity 
     style={Styles.videoCallButton} 
     onPress={() => console.log("Video Button Pressed")} 
    ><View> 
     <Icon name={'ios-videocam'} size={28} color="white" align='right'/></View> 
    </TouchableOpacity> 
    </View> 
); 
} 
};