React Native Touchable Icon

Question

Chcę zaimplementować ikonę menu z MaterialIcon w moim nagłówku, a kiedy stuknę tę ikonę, chcę otworzyć menu. Problem polega na tym, że jeśli dodam margines lub coś innego do tej ikony, aby ustawić ikonę, Touchable onPress nie działa poprawnie. Najpierw miałem absolutne pozycjonowanie z zIndex i onPress nie był uruchamiany za każdym razem. Powiedzmy, że stuknięcie 100 razy to onPress został uruchomiony 3 razy. Wyobraziłem sobie to samo zachowanie z pozycjonowaniem względnym i marginesem. Próbowałem również zaimplementować Touchables z reagujących natywnych gestów lub z reagujących natywnych gestów. W chwili, gdy usuwam margines, Touchable działa poprawnie. OnPress jest uruchamiany za każdym razem, gdy naciskam tę ikonę. Bardzo ciekawy. Co jest nie tak? Czy ktoś zna ten problem?

To jest mój kod:

<StatusBar barStyle="light-content" />
<ScreenCmpt style={styles.container}>
   <View style={styles.headerContainer}>
     <TouchableOpacity onPress={() => console.log("test")}>
       <View style={styles.menuContainer}>
          <MaterialIcons style={styles.menu} name="menu" size={30} />
       </View>
     </TouchableOpacity>
    ....

headerContainer: {
    flexDirection: "row",
    alignSelf: "center",
  },
  header: {
    fontSize: 30,
    fontWeight: "bold",
    marginBottom: 15,
    fontFamily: "CinzelDecorative_400Regular",
    marginBottom: 20,
  },
  menuContainer: {
    marginLeft: height * -0.13,
  },
  menu: {
    color: colors.primary,
    alignSelf: "center",
    // marginLeft: height * -0.13,
  },

Answer 1

Amir ma tam dobre informacje do debugowania, które warto poznać i wykorzystać w przyszłości. To powiedziawszy, tylko dlatego, że możesz zobaczyć, gdzie znajdują się Twoje lokalizacje, których można dotknąć, nie oznacza, że ​​zrozumiesz, co jest nie tak.

Osobiście nie `` wiem '', co jest nie tak, ale przypuszczam, że dodając margines, przenosisz ikonę z dotykowego pojemnika. Zalecałbym dodanie stylów pozycjonowania do TouchableOpacityikony zamiast. Powinno to przesunąć cały przycisk, a nie tylko jego zawartość, ponieważ możliwe jest przeniesienie zawartości poza kontener nadrzędny.

Answer 2

kochanie, nie będę edytować twoich kodów i chcę, żebyś to zrobił, więc będziesz mógł również debugować swoje kody, znajdować problemy i je rozwiązywać.

Istnieje wbudowane menu reagowania na natywne debugowanie z natywnymi aplikacjami reagowania! dla twojej sytuacji na Androidzie ctrl (cmd) + M i na IOS ctrl (cmd) + D otworzy poniższe wyskakujące okienko

następnie kliknij inspektor pokazu iz menu wybierz opcję dotykową, a zobaczysz, że Twoja aplikacja wygląda następująco:

teraz kliknij część, którą chcesz sprawdzić, którą można dotknąć, i zobacz, gdzie znajduje się Twój dotyk! Jestem pewien, że zrozumiesz i zrobisz resztę