ReactNativeのタッチ可能なアイコン

Aug 21 2020

MaterialIconのメニューアイコンをヘッダーに実装したいのですが、このアイコンをタップするとメニューが開きます。問題は、このアイコンにマージンなどを追加してアイコンを配置すると、TouchableonPressが正しく機能しないことです。まず、zIndexを使用した絶対ポジショニングがあり、onPressが毎回トリガーされるわけではありませんでした。onPressを100回タップすると、3回トリガーされたとしましょう。私は、相対的な位置とマージンで同じ動作を理解しました。また、react-native-gesturesまたはreact-nativeからTouchablesを実装しようとしました。マージンを削除した瞬間、Touchableは正しく機能します。このアイコンを押すたびにonPressがトリガーされます。とても好奇心が強い。どうしましたか?誰かがこの問題を知っていますか?

これは私のコードです:

<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,
  },

回答

2 DougWatkins Aug 21 2020 at 00:08

Amirにはいくつかの優れたデバッグ情報があり、将来知って使用する価値があります。とはいえ、タッチ可能な場所がどこにあるかがわかるからといって、何が悪いのかを理解できるとは限りません。

私は個人的に何が悪いのか「わかりません」が、マージンを追加することで、アイコンをタッチ可能なコンテナから移動していると思います。TouchableOpacityアイコンの代わりにポジショニングスタイルを追加することをお勧めします。これにより、コンテンツだけでなくボタン全体が移動するはずです。これは、コンテンツを親コンテナの外に移動できるためです。

2 AmirDoreh Aug 21 2020 at 00:04

親愛なる私はあなたのコードを編集しません、そして私はあなた自身にそれをしてもらいたいので、あなたはあなたのコードをデバッグして問題を見つけそしてそれらを解決することもできるでしょう。

反応ネイティブアプリが埋め込まれた反応ネイティブデバッグメニューがあります!Android ctrl(cmd)+ MおよびIOSctrl(cmd)+ Dの状況では、以下のポップアップが開きます。

次に、show inspectorをクリックし、メニューからtouchableを選択すると、次のようなアプリが表示されます。

次に、タッチ可能オブジェクトを確認する部分をクリックして、タッチ可能オブジェクトがどこにあるかを確認します。私はあなたが理解し、残りを行うと確信しています