[英]OnPress not working inside Touchable Opacity
I am building a mobile app on react-native!我正在 React-native 上构建一个移动应用程序! Recently I build my own header component for every page.
最近我为每个页面构建了自己的标题组件。 Here is the code of my Header component.
这是我的 Header 组件的代码。 I have two icons inside that component.
我在该组件中有两个图标。 But unfortunately these buttons are not working at all!!
但不幸的是,这些按钮根本不起作用!!
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 is not responding at all!
onPress 根本没有响应!
不是这里的情况,但对于未来的读者,可能是因为您将一个TouchableOpacity
包裹在另一个中
Try this solution, notice I have wrapped your Icon within a view and also the name.试试这个解决方案,注意我已经把你的图标和名字都包裹在了一个视图中。
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>
);
}
};
尝试用 alert 代替 console.log 来查看当时和那里的数据,可能是你错过了 c 的位置
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.