onPress в функционале реагирует, нативный компонент не работает - PullRequest
Новая
       36

onPress в функционале реагирует, нативный компонент не работает

0 голосов
/ 20 апреля 2020

Я пытаюсь создать простой многократно используемый компонент кнопки в реагирующем, но по какой-то причине функция onPress никогда не вызывается. Большинство потоков, которые я нахожу, просто вызывают функцию мгновенно или объявляют что-то неправильное. Я считаю, что все должно быть в порядке с моим объявлением, и я пробовал несколько разных форм, но безрезультатно 

import React from 'react';
import { Text, Button, Image, TouchableOpacity } from 'react-native';
import { useHistory } from "react-router-native";
import { getFileUrl } from '../db/firebaseDb';
import styles from '../modules/Styles';

const GameIcon = (props) => {
  const history = useHistory();

  const handleClick = (pId) => {
    console.log("TEST");
    history.push("/game");
  }

  return (
    <TouchableOpacity activeOpacity="0.5" onPress={handleClick}>
      {(props.imageUrl)?<Image source={{uri: props.imageUrl}} style={{width: 32, height: 32}}/>:<Text>loading...</Text>}
      <Button title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}/>
    </TouchableOpacity>
  )
}

export default GameIcon;

console.log никогда не запускается и я понятия не имею, почему ... Я попытался написать компонент как функцию GameIcon ... Я попытался это без TouchableOpacity и просто с кнопкой в ​​функции возврата ... ничего не работает ни на реальном устройстве, ни на эмуляторе

Небольшое обновление:

Я изменил содержимое функции возврата на: 

<TouchableOpacity activeOpacity={0.5} onPress={()=>console.log("HELLO")}>
  <Text title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}>{props.game.id}</Text>
</TouchableOpacity>

Компонент рендерится без ошибок или чего-либо еще, его можно вкладывать, и прозрачность изменяется правильно но onPress не вызывается (поэтому нет журнала консоли)

Кажется, это не ограничивается только функциональными компонентами ...

Я добавил пример кнопки из документации о реактивной нативе 1 : 1 на мой домашний экран, и событие onPress никогда не вызывается: 

<Button
  onPress={() => {
    alert('You tapped the button!');
  }}
  title="Press Me"
/>

Ответы [ 3 ]

0 голосов
/ 20 апреля 2020

Итак, у меня ожидали некоторые обновления macOS, и оказалось, что каким-то образом они стали причиной этого ... Как я до сих пор не понимаю ... Это должно быть независимо от обновлений операционной системы, верно ? В любом случае ... 15 минут и много перезапусков спустя, и теперь обе функции onPress работают как надо - еще раз спасибо всем, кто пытался помочь!

ОБНОВЛЕНИЕ: Загрузил мою маму c снова сегодня и та же проблема - вчера весь день работал после обновлений, но сегодня точно такая же проблема - все кнопки реагируют на нажатие, ни одна кнопка не вызывает функцию onPress

FINAL UPDATE: я нашел причину для это: это ошибка, связанная с реакцией, и происходит только в режиме отладки - подробнее здесь: https://github.com/facebook/react-native/issues/28687

0 голосов
/ 20 апреля 2020

Пожалуйста, попробуйте этот код. 

import React from 'react';
import { Text, Button, Image, TouchableOpacity } from 'react-native';
import { useHistory } from "react-router-native";
import { getFileUrl } from '../db/firebaseDb';
import styles from '../modules/Styles';

const GameIcon = (props) => {
  const history = useHistory();

  const handleClick = (pId) => {
    console.log("TEST");
    history.push("/game");
  }

  return (
    <TouchableOpacity activeOpacity={0.5} onPress={handleClick}>
    <Text title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}>{props.game.id}</Text>
    </TouchableOpacity>
  )
}

export default GameIcon;
0 голосов
/ 20 апреля 2020

Возможно, кнопка глотает щелчок, а не обрабатывается сенсорным.

...