React Native Touchable 아이콘

Question

헤더의 MaterialIcon에서 메뉴 아이콘을 구현하고이 아이콘을 탭하면 메뉴를 열고 싶습니다. 문제는 아이콘 위치를 지정하기 위해이 아이콘에 여백이나 다른 것을 추가하면 Touchable onPress가 제대로 작동하지 않는다는 것입니다. 먼저 zIndex로 절대 포지셔닝이 있었고 onPress가 매번 트리거되지 않았습니다. onPress가 3 번 트리거 된 것을 100 번 탭했다고 가정 해 보겠습니다. 나는 상대적인 위치와 여백으로 동일한 동작을 알아 냈다. 또한 react-native-gestures 또는 react-native에서 Touchables를 구현하려고했습니다. 여백을 제거하는 순간 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

Amir는 거기에 좋은 디버깅 정보를 가지고 있으며 앞으로 알고 사용할 가치가 있습니다. 즉, 터치 가능한 위치가 어디에 있는지 볼 수 있다고해서 무엇이 잘못되었는지 이해할 수있는 것은 아닙니다.

나는 개인적으로 무엇이 잘못되었는지 '알지'못하지만 여백을 추가하면 아이콘을 터치 가능한 컨테이너 밖으로 옮기는 것입니다. TouchableOpacity아이콘 대신에 위치 스타일을 추가하는 것이 좋습니다 . 부모 컨테이너 외부로 콘텐츠를 이동할 수 있기 때문에 콘텐츠가 아닌 전체 버튼을 위로 이동해야합니다.

Answer 2

친애하는 나는 당신의 코드를 편집하지 않을 것이고 당신 스스로 그것을하기를 원한다. 그래서 당신은 또한 당신의 코드를 디버그하고 문제를 발견하고 해결할 수있을 것이다.

React 네이티브 앱에 포함 된 React 네이티브 디버그 메뉴가 있습니다! Android ctrl (cmd) + M 및 IOS ctrl (cmd) + D 의 상황에 따라 아래 팝업이 열립니다.

그런 다음 show inspector 를 클릭 하고 메뉴에서 touchable 을 선택 하면 다음과 같은 앱이 표시됩니다.

이제 터치 가능을 확인하려는 부분을 클릭하고 터치 가능 위치를 확인하십시오! 나는 당신이 나머지를 이해하고 할 것이라고 확신합니다