Прежде чем начать, я проверил другие распространенные решения этой проблемы, такие как импорт TouchableOpacity из response-native вместо response-gesture-handler (у меня он даже не установлен) или изменение z-index / абсолютное позиционирование. Ни один из них не работает.

Я новичок в React Native. Я пытаюсь следовать собственному курсу, но я застрял в этой проблеме. Я использую Expo на реальном Android. Эмуляторами не пользуюсь. Не тестировал на 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>
  );
};

Любые идеи?

0
G. ShadowBroker 17 Авг 2020 в 19:17

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>
  );
};

И теперь приложение работает как задумано.

0
G. ShadowBroker 17 Авг 2020 в 22:47

Можешь попробовать вот так:

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>
0
B. Mohammad 17 Авг 2020 в 16:59