onPress 事件在 Android 上的 TouchableOpacity 上不起作用

Posted 2023-03-10

【中文标题】onPress 事件在 Android 上的 TouchableOpacity 上不起作用

【英文标题】：onPress event not working on TouchableOpacity on Android

【发布时间】：2020-12-06 19:41:24

【问题描述】：

在我开始之前，我已经检查了这个问题的其他常见解决方案，比如从“react-native”而不是“react-gesture-handler”导入 TouchableOpacity（我什至没有安装它），或者更改 z -索引/绝对定位。它们都不起作用。

我是 React Native 的初学者。我正在尝试遵循本机反应课程，但我被困在这个问题上。我在真正的 android 上使用 Expo。我不使用模拟器。尚未在 ios 上进行测试，因为我无权访问。当我将 onPress 添加到 TouchableOpacity 时，大多数情况下它会在单击时提供反馈（不透明度更改），但它不会触发 onPress 事件。但是，有时它会起作用。当我按下右边缘时，有时会触发事件。这是一个例子：

index.js

import React from "react";
import Options from "./screens/Options";

export default function App() 
  return <Options />;

Options.js

import React from "react";
import  View, StyleSheet  from "react-native";
import RowItem from "../components/RowItem";
import Constants from "expo-constants";
import styled from "styled-components";
import colors from "../constants/colors";
import  Entypo  from "@expo/vector-icons";

const SSeparator = styled.View`
  background: $colors.border;
  height: $StyleSheet.hairlineWidthpx;
  margin-left: 20px;
`;
const SView = styled.View`
  margin-top: $Constants.statusBarHeightpx;
`;

export default () => 
  return (
    <SView>
      <RowItem
        title="Themes"
        icon=
          <Entypo
            name="chevron-left"
            size=20
            color=colors.blue
            onPress=() => alert("click")
          />
        
      />
      <SSeparator />
    </SView>
  );
;

RowItem.js

import React from "react";
import  TouchableOpacity, Text  from "react-native";
import styled from "styled-components";
import colors from "../constants/colors";

const SText = styled.Text`
  font-size: 16px;
`;
const STouchableOpacity = styled.TouchableOpacity`
  margin: 16px 20px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;

export default ( title, icon, onPress ) => 
  return (
    <STouchableOpacity onPress=onPress>
      <SText>title</SText>
      icon
    </STouchableOpacity>
  );
;

有什么想法吗？

【问题讨论】：

如果你直接使用TouchableOpacity没有styled-components，你还会遇到这个问题吗？

@B.Mohammad 是的，我已经尝试过了。问题依然存在。

【参考方案1】：

你可以这样试试吗：

export default () => 
const testFunc = () =>
 alert('test')

  return (
    <SView>
      <RowItem
        title="Themes"
        icon=
          <Entypo
            name="chevron-left"
            size=20
            color=colors.blue
            onPress=testFunc
          />
        
      />
      <SSeparator />
    </SView>
  );
;

然后：

<STouchableOpacity onPress=()=>onPress()>
      <SText>title</SText>
      icon
    </STouchableOpacity>

【讨论】：

同样的问题。单击它只会使文本闪烁。有时单击元素的右边缘时会弹出警报。而且，如果我继续点击，它会抛出一个以前没有发生过的错误：TypeError: _onPress is not a function

会发生什么：youtube.com/watch?v=7xnUKhpte_s

【参考方案2】：

好的，所以我终于注意到了这个错误，我为没有注意到它而感到羞耻。我一直在阅读代码，但看不到明显的内容。

我错误地将 onPress 事件复制到图标中，而不是将其直接放在 RowItem 中。

而不是这个：

<RowItem
        title="Themes"
        icon=
          <Entypo
            name="chevron-left"
            size=20
            color=colors.blue
            onPress=() => alert("click")
          />
        
      />

应该是这样的：

<RowItem
        title="Themes"
        handlePress=() => alert("test")
        icon=<Entypo name="chevron-left" size=20 color=colors.blue />
      />

在 RowItem.js 内部：

export default ( title, icon, handlePress ) => 
  return (
    <STouchableOpacity onPress=() => handlePress()>
      <Text>title</Text>
      icon
    </STouchableOpacity>
  );
;

现在应用程序按预期运行。

【讨论】：

hhhh，所以才叫BUG。