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

【问题标题】：onPress event not working on TouchableOpacity on AndroidonPress 事件在 Android 上的 TouchableOpacity 上不起作用
【发布时间】：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.hairlineWidth}px;
  margin-left: 20px;
`;
const SView = styled.View`
  margin-top: ${Constants.statusBarHeight}px;
`;

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 是的，我已经尝试过了。问题依然存在。

标签： react-native expo

【解决方案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。