OnPress 在 Touchable Opacity 中不起作用答案

【问题标题】：OnPress not working inside Touchable OpacityOnPress 在 Touchable Opacity 中不起作用
【发布时间】：2018-04-05 01:40:28
【问题描述】：

我正在 react-native 上构建一个移动应用程序！最近我为每个页面构建了自己的标题组件。这是我的 Header 组件的代码。我在该组件中有两个图标。但不幸的是，这些按钮根本不起作用！

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 根本没有响应！

【问题讨论】：

你也可以添加样式吗？
不工作，你的意思是你没有得到控制台输出和/或触摸没有提供任何视觉反馈？

标签： javascript reactjs react-native touchableopacity onpress

【解决方案1】：

这里不是这样，但对于未来的读者来说，这可能是因为您将一个 TouchableOpacity 包裹在另一个中

【讨论】：

【解决方案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(){
 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>
 );
 }
};

【讨论】：

【解决方案3】：

尝试使用alert代替console.log来查看数据，可能是你错过了c的位置

【讨论】：