OnPress 在 Touchable Opacity 中不起作用

Posted 2023-04-18

【中文标题】OnPress 在 Touchable Opacity 中不起作用

【英文标题】：OnPress not working inside 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 根本没有响应！

【问题讨论】：

你也可以添加样式吗？

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

【参考方案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的位置