Biểu tượng React Native Touchable

Question

Tôi muốn triển khai Biểu tượng Menu từ MaterialIcon trong Tiêu đề của mình và khi nhấn vào Biểu tượng này, tôi muốn mở menu. Vấn đề là, nếu tôi thêm lề hoặc thứ gì đó khác vào Biểu tượng này để định vị biểu tượng, thì Touch onPress không hoạt động bình thường. Đầu tiên, tôi có Định vị tuyệt đối với zIndex và onPress không được kích hoạt mọi lúc. Giả sử khai thác 100 lần onPress đã được kích hoạt trong 3 lần. Tôi đã tìm ra hành vi tương tự với vị trí và lợi nhuận tương đối. Tôi cũng đã cố gắng triển khai Touchables từ cử chỉ phản ứng gốc hoặc từ phản ứng gốc. Trong thời điểm này, tôi loại bỏ lề, Touchable hoạt động chính xác. Nhận được onPress được kích hoạt mỗi khi tôi nhấn vào biểu tượng này. Rất tò mò. Chuyện gì vậy? Có ai đó biết vấn đề này?

Đây là Mã của tôi:

<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 có một số thông tin gỡ lỗi tốt ở đó, rất đáng để biết và sử dụng trong tương lai. Điều đó đang được nói, chỉ vì bạn có thể thấy vị trí có thể chạm vào của mình không có nghĩa là bạn sẽ hiểu điều gì không ổn.

Cá nhân tôi không 'biết' điều gì là sai, nhưng suy đoán của tôi là bằng cách thêm một lề, bạn đang di chuyển biểu tượng của mình ra khỏi vùng chứa có thể chạm được. Tôi khuyên bạn nên thêm các kiểu định vị của bạn TouchableOpacityvào thay vì biểu tượng của bạn. Thao tác này sẽ di chuyển toàn bộ nút thay vì chỉ nội dung của nó vì có thể di chuyển nội dung ra bên ngoài vùng chứa mẹ.

Answer 2

thân mến, tôi sẽ không chỉnh sửa mã của bạn và tôi muốn chính bạn làm điều đó, vì vậy bạn cũng sẽ có thể gỡ lỗi mã của mình và tìm ra các vấn đề và giải quyết chúng.

Có menu gỡ lỗi gốc phản ứng được nhúng với các ứng dụng gốc phản ứng! đối với trường hợp của bạn trên Android ctrl (cmd) + M và trên IOS ctrl (cmd) + D sẽ mở ra cửa sổ bật lên bên dưới

sau đó nhấp vào hiển thị trình kiểm tra và từ menu ở đó chọn có thể chạm vào, sau đó bạn sẽ thấy ứng dụng của bạn trông giống như sau:

bây giờ hãy nhấp vào phần bạn muốn kiểm tra phần có thể chạm và xem vị trí có thể chạm của bạn ở đâu! Tôi chắc chắn bạn sẽ hiểu và làm phần còn lại