OnPressがTouchable Opacityで動作しない

Question

私は反応ネイティブでモバイルアプリを構築しています！最近私はすべてのページのために私自身のヘッダーコンポーネントを構築する。ここに私のヘッダーコンポーネントのコードです。私はそのコンポーネントの中に2つのアイコンを持っています。しかし残念ながら、これらのボタンはまったく動作しません！

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