Android设备上的Expo App某些onPress（）未触发

Posted 2023-02-19

【中文标题】Android设备上的Expo App某些onPress（）未触发

【英文标题】：Expo App on Android device some onPress() not firing

【发布时间】：2022-01-12 02:30:21

【问题描述】：

这里发生了几个问题：

只有删除图标触发 onPress() 我尝试了不同的 JSX 组件嵌套，以使更新图标无法触发 如果这很重要，由于某种原因，同一页面上 StackNavigator 中的“后退”箭头也不起作用。 此代码在 AVD 和 ios 模拟器上完美运行 TouchableOpacity 组件的 Alpha 效果未呈现

我已经广泛搜索，唯一类似的问题是绝对定位 TouchableOpacity 组件，这不是我的情况。

我也尝试过 onPress = () Alert('click')，但 android 设备上没有任何反应。

return (
    <View style=styles.container>
      <View style=styles.detailsPanel>
        /* first row */

        <View style=styles.rowContainer>
          <View style=styles.firstColumn>
            <AppText size=16 color=STYLES.blue weight='bold'>
              route.params.item.date
            </AppText>
          </View>
          <View style=styles.secondColumn>
            <View style= flex: 1, flexDirection: "row" >
              <AppText size=16 color=STYLES.blue weight='bold'>
                route.params.item.aircraft_type
              </AppText>
              <AppText>"  "</AppText>
              <AppText size=16 color=STYLES.blue weight='bold'>
                route.params.item.registration
              </AppText>
            </View>
          </View>
          <View style=styles.thirdColumn>
            <AppText size=16 color=STYLES.blue weight='bold'>
              route.params.item.duration
            </AppText>
          </View>
        </View>
        /* second row */
        <Separator />
        <View style=styles.rowContainer>
          <View style=styles.firstColumn>
            <AppText size=16 color=STYLES.black>
              route.params.item.route
            </AppText>
          </View>
          <View style=styles.thirdColumn>
            <AppText size=16 color=STYLES.black>
              route.params.item.pilot_in_command ? "PIC" : ""
              route.params.item.second_in_command ? "SIC" : ""
              route.params.item.solo ? "Solo" : ""
              route.params.item.dual ? "Dual" : ""
            </AppText>
          </View>
        </View>
        /* third row */
        <View style=styles.rowContainer>
          <View style=styles.firstColumn>
            <View style=styles.rowContainer>
              <AppText size=16 color=STYLES.black>
                Landings:
              </AppText>
              route.params.item.landings_day ? (
                <AppText size=16 color=STYLES.black>
                  " "
                  Day route.params.item.landings_day
                </AppText>
              ) : null
              route.params.item.landings_night ? (
                <AppText size=16 color=STYLES.black>
                  " "
                  Night route.params.item.landings_night
                </AppText>
              ) : null
            </View>
          </View>
          <View style=styles.secondColumn></View>
          <View style=styles.thirdColumn>
            <AppText size=16 color=STYLES.black>
              route.params.item.instructor ? "  CFI" : ""
            </AppText>
          </View>
        </View>

        /* fourth row */
        <View style=styles.rowContainer>
          <View style=styles.firstColumn>
            <View style=styles.rowContainer>
              route.params.item.night ? (
                <AppText size=16 color=STYLES.black>
                  Night route.params.item.night
                  "  "
                </AppText>
              ) : null
              route.params.item.instrument ? (
                <AppText size=16 color=STYLES.black>
                  Inst route.params.item.instrument
                  "  "
                </AppText>
              ) : null
              route.params.item.simulated_instrument ? (
                <AppText size=16 color=STYLES.black>
                  Hood route.params.item.simulated_instrument
                  "  "
                </AppText>
              ) : null
            </View>
          </View>
          <View style=styles.thirdColumn>
            <AppText size=16 color=STYLES.black>
              route.params.item.cross_country ? "XC" : ""
              route.params.item.simulator ? "  Sim" : ""
            </AppText>
          </View>
        </View>
        <View style=styles.rowContainer>
          <View style=styles.firstColumn>
            <View style=styles.rowContainer>
              approaches.map((appr, index) => (
                <AppText size=16 color=STYLES.black key=index>
                  appr.approach_type-appr.number" "
                </AppText>
              ))
            </View>
          </View>
          <View style=styles.thirdColumn>
            route.params.item.hold ? <AppText size=16>Hold</AppText> : null
          </View>
        </View>

        /* fifth row */
        <View style=styles.rowContainer>
          <View style=styles.firstColumn>
            <AppText>route.params.item.remarks</AppText>
          </View>
        </View>
        /* sixth row */
        <Separator />
        <View style= flexDirection: "row", marginBottom: 5 >
          <TouchableOpacity
            style=
              flex: 2,
              backgroundColor: STYLES.danger,
              alignItems: "center",
              justifyContent: "center",
            
            onPress=() => 
              showAlert(
                route.params.item.id,
                route.params.item.date,
                route.params.item.route
              );
            
          >
            <View>
              <MaterialCommunityIcons
                name="delete"
                size=30
                color=STYLES.white
              />
            </View>
          </TouchableOpacity>

          <TouchableOpacity
            onPress=() => 
              navigation.navigate("FlightUpdate", 
                item: route.params.item,
              );
            
            style=
              flex: 2,
              backgroundColor: STYLES.blue,
              alignItems: "center",
              justifyContent: "center",
            
          >
            <View>
              <MaterialCommunityIcons
                name="update"
                size=30
                color=STYLES.white
                style= padding: 5 
              />
            </View>
          </TouchableOpacity>
        </View>
      </View>

      <MapView
        style=styles.map
        mapPadding=
          top: 60,
          bottom: 10,
          right: 40,
          left: 40,
        
        ref=mapRef
      >
        markers.map((marker) => (
          <Marker
            key=marker.key
            coordinate=marker.coordinates
            title=marker.title
          />
        ))
        <Polyline
          strokeColor=STYLES.blue
          strokeWidth=3
          geodesic=true
          coordinates=polylines
        />
      </MapView>
      <ActivityModal visible=Context.activityVisibleValue></ActivityModal>
    </View>
  );


const styles = StyleSheet.create(
  container: 
    flex: 1,
    flexDirection: "column",
  ,
  detailsPanel: 
    flexDirection: "column",
    width: "100%",
    margin: 0,
    backgroundColor: STYLES.white,
    borderRadius: STYLES.borderRadius,
    padding: STYLES.borderRadius,
    backgroundColor: STYLES.white,
    borderRadius: STYLES.borderRadius,
  ,
  rowContainer: 
    flexDirection: "row",
    paddingBottom: 5,
  ,
  firstColumn: 
    flex: 1,
    flexDirection: "column",
  ,
  secondColumn: 
    flex: 2,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  ,
  thirdColumn: 
    flex: 1,
    flexDirection: "column",
    alignItems: "flex-end",
  ,

  text: 
    fontFamily: STYLES.font,
    color: STYLES.blue,
  ,
  map: 
    flex: 1,
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
    borderRadius: STYLES.borderRadius,
  ,
);```

【参考方案1】：

当您使用 Expo 和 React Navigation 时，我预计 react-native-gesture-handler 包已经安装。

尝试从react-native-gesture-handler 导入任何可触摸组件（TouchableOpacity 或 TouchableHighlight）来代替react-native

import TouchableOpacity, TouchableHighlight from "react-native-gesture-handler"

确保您的代码未包含在任何模态组件或底页中。

其中一些模式将子组件包裹在另一个可触摸组件中，该组件阻止触摸事件传播到嵌套的子组件。

【讨论】：

感谢您的回复，抱歉回复晚了。我将其缩小到干扰其他组件中的 onPress 事件的 MapView 组件。当 MapView 被注释掉时，一切都很好。你说的底页是什么意思？我仍在制定解决方案。

底页是从底部显示的组件 - github.com/gorhom/react-native-bottom-sheet 。可以在 Expo Snack 上重现该问题的缩小版本。 snack.expo.dev