Значок React Native Touchable

Question

Я хочу реализовать значок меню из MaterialIcon в моем заголовке, и когда я нажимаю на этот значок, я хочу открыть меню. Проблема в том, что если я добавляю поля или что-то еще к этому значку для размещения значка, Touchable onPress не работает должным образом. Сначала у меня было абсолютное позиционирование с zIndex, и onPress не запускался каждый раз. Скажем, при нажатии 100 раз onPress запускается 3 раза. Я выяснил то же поведение с относительным позиционированием и маржей. Я также пытался реализовать Touchables из react-native-gestures или из react-native. В тот момент, когда я удаляю маржу, Touchable работает правильно. OnPress get запускается каждый раз, когда я нажимаю этот значок. Очень любопытный. Что не так? Кто-нибудь знает эту проблему?

Это мой код:

<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

У Амира есть хорошая отладочная информация, которую стоит знать и использовать в будущем. При этом то, что вы можете видеть, где находятся ваши осязаемые места, не означает, что вы поймете, что не так.

Я лично не «знаю», что не так, но я предполагаю, что, добавляя маржу, вы перемещаете свой значок из сенсорного контейнера. Я бы порекомендовал добавить ваши стили позиционирования TouchableOpacityвместо вашего значка. Это должно переместить всю кнопку, а не только ее содержимое, поскольку можно переместить содержимое за пределы родительского контейнера.

Answer 2

Уважаемый, я не буду редактировать ваши коды, и я хочу, чтобы вы это делали, чтобы вы также могли отлаживать свои коды, находить проблемы и решать их.

Есть встроенное меню отладки, встроенное в собственные приложения! для вашей ситуации на Android ctrl (cmd) + M и на IOS ctrl (cmd) + D откроет всплывающее окно ниже

затем нажмите « Показать инспектор» и в меню выберите « Сенсорный», после чего вы увидите, что ваше приложение выглядит так:

Теперь нажмите на ту часть, которую вы хотите проверить, и посмотрите, где находится ваш сенсорный элемент! Я уверен, ты поймешь и сделаешь все остальное