Ikon React Native Touchable

Question

Saya ingin menerapkan Ikon Menu dari MaterialIcon di Header saya dan ketika saya mengetuk Ikon ini saya ingin membuka menu. Masalahnya adalah, jika saya menambahkan margin atau sesuatu yang lain ke Ikon ini untuk memposisikan ikon, onPress yang Dapat Disentuh tidak berfungsi dengan benar. Pertama saya memiliki Positioning absolut dengan zIndex dan onPress tidak terpicu setiap saat. Katakanlah mengetuk 100 kali onPress dipicu sebanyak 3 kali. Saya telah menemukan perilaku yang sama dengan pemosisian dan margin relatif. Saya juga mencoba menerapkan Touchables dari react-native-gestures atau dari react-native. Saat saya menghapus margin, Touchable berfungsi dengan benar. OnPress get dipicu setiap kali saya menekan ikon ini. Sangat penasaran. Apa yang salah? Apakah seseorang mengetahui masalah ini?

Ini Kode saya:

<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 memiliki beberapa informasi debugging yang bagus di sana, dan itu layak untuk diketahui dan digunakan di masa depan. Meskipun demikian, hanya karena Anda dapat melihat lokasi lokasi yang dapat disentuh tidak berarti Anda akan memahami apa yang salah.

Saya pribadi tidak 'tahu' apa yang salah, tetapi tebakan saya adalah dengan menambahkan margin, Anda memindahkan ikon Anda keluar dari wadah yang dapat disentuh. Saya akan merekomendasikan menambahkan gaya pemosisian Anda ke TouchableOpacityalih - alih ikon Anda. Ini harus memindahkan seluruh tombol, bukan hanya isinya karena dimungkinkan untuk memindahkan konten di luar wadah induk.

Answer 2

sayang saya tidak akan mengedit kode Anda dan saya ingin diri Anda sendiri melakukannya, jadi Anda juga akan dapat men-debug kode Anda dan menemukan masalah serta menyelesaikannya.

Ada menu debug react native yang disematkan dengan aplikasi react native! untuk situasi Anda di Android ctrl (cmd) + M dan di IOS ctrl (cmd) + D akan membuka popup di bawah ini

kemudian klik show inspector dan dari menu di sana pilih touchable maka Anda akan melihat ini aplikasi Anda terlihat seperti:

sekarang klik pada bagian yang ingin Anda periksa yang dapat disentuh dan lihat di mana lokasi yang dapat disentuh Anda! Saya yakin Anda akan mengerti dan melakukan sisanya