可触摸的不透明标题 React Native

Posted 2023-02-22

【中文标题】可触摸的不透明标题 React Native

【英文标题】：Touchable Opacity Header React Native

【发布时间】：2019-05-22 07:23:33

【问题描述】：

我希望我的反应导航栏中的标题是可点击的，并在我点击时弹出一个菜单，我试图首先弹出一个日志或警报，但它在屏幕呈现时打开，而不是我点击它

这是一个链接，我在该链接中使用 onPress 添加了一个自定义组件，但它只会触发 onRender

https://snack.expo.io/r10TGyieE

我做错了什么？

【问题讨论】：

请尝试该代码，如果正确则标记为已解决。

【参考方案1】：

您的 onPress 事件没有绑定，因此它会在您运行应用程序时首先触发。

当使用 Es6 箭头函数时，你的函数默认是绑定的。onPress=()=>this.someFunction()

否则你需要手动绑定onPress=this.someFunction.bind(this)来调用你的函数。

class LogoTitle extends React.Component 
  render() 
    return (
      <TouchableOpacity onPress=()=>alert('test')>
        <Text style= color: "white", fontWeight:'bold' > List Layout</Text>
      </TouchableOpacity>
    );
  

【参考方案2】：

正如 Tarreq 所说，您可以使用它

否则

onPress=this.someAction

因为onPress方法调用了一个函数所以你可以直接写函数名。

【参考方案3】：

就像爸爸说的，

这个：

onPress=this.someAction()

被认为是直接代码，一旦应用程序到达它所在的行，它就会被执行（这就是它在启动时执行的原因，尽管你在启动时没有提到它）

但是当你使用时：

onPress=() => this.someAction()

你告诉编译器，这是 onPress 发生时要执行的函数。 并且可以看到是箭头函数格式。

【参考方案4】：

https://snack.expo.io/HJvXPJix4

你需要让它调用onPress=() => this.someAction()而不是onPress=this.someAction()