OutsidePressHandler 在 ios 中自动 getTriggered

Question

这是我的反应本机代码。

这在 Android 上运行良好，但在 ios 上不行。当我点击其中一个孩子时， onOutsidePress 就会被触发。

<OutsidePressHandler
        onOutsidePress={() => {
            console.log("Pressed outside the box!");
            closePopup();
        }}
    >
        <TouchableOpacity
            onPress={() => {
                navigation.navigate(routes.PROFILE);
                closePopup();
            }}
        >
            <View
                style={{
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: 10,
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    borderBottomColor: "#eeeeef",
                    borderBottomWidth: 1,
                }}
            >
                <Text style={{ color: "#000", fontSize: 16 }}>{t("profile")}</Text>
            </View>
        </TouchableOpacity>
        
        <TouchableOpacity
            onPress={() => {
                navigation.navigate(routes.MY_STRATUM);
                closePopup();
            }}
        >
            <View
                style={{
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: 10,
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    borderBottomColor: "#eeeeef",
                    borderBottomWidth: 1,
                }}
            >
                <Text style={{ color: "#000", fontSize: 16 }}>
                    {t("my_stratum")}
                </Text>
            </View>
        </TouchableOpacity>

</OutsidePressHandler>

对于解决方案，我将 TouchableOpacity 替换为 View，并将 onPress 替换为 onTouchStart。然后就可以正常使用了。

但是我还有另一种情况，其中数据是动态的并且数据比这两个子项更多，所以当我尝试滚动时它不起作用。它需要触摸时的值。

Answer 1

嗨@Devendra Singh，您可以通过以下解决方案

1. 使用TouchableWithoutFeedback更精确地处理触摸事件。

2. 将动态内容包装在 ScrollView 中以处理滚动。

   import React from 'react';
   import { View, Text, ScrollView, TouchableWithoutFeedback } from 'react-native';
   import { useNavigation } from '@react-navigation/native';
   
   const YourComponent = ({ data, closePopup, t, routes }) => {
     const navigation = useNavigation();
   
     const handlePress = (route) => {
       navigation.navigate(route);
       closePopup();
     };
   
     return (
       <OutsidePressHandler
         onOutsidePress={() => {
           console.log("Pressed outside the box!");
           closePopup();
         }}
       >
         <ScrollView>
           {data.map((item, index) => (
             <TouchableWithoutFeedback
               key={index}
               onPress={() => handlePress(item.route)}
             >
               <View
                 style={{
                   flexDirection: "row",
                   alignItems: "center",
                   justifyContent: "space-between",
                   gap: 10,
                   paddingVertical: 5,
                   paddingHorizontal: 10,
                   borderBottomColor: "#eeeeef",
                   borderBottomWidth: 1,
                 }}
               >
                 <Text style={{ color: "#000", fontSize: 16 }}>{t(item.label)}</Text>
               </View>
             </TouchableWithoutFeedback>
           ))}
         </ScrollView>
       </OutsidePressHandler>
     );
   };
   
   export default YourComponent;