React Native在特定Android设备上TextInput与TouchableOpacity失效求助

问题描述 #

我开发的React Native应用在三星Galaxy S20等多数设备上运行正常，所有按钮、TouchableOpacity和TextInput组件功能均正常。但在Blackview Tab 8、Huawei MatePad T两款设备上出现异常，核心表现为FlatList内的TouchableOpacity组件onPress事件完全无法触发。已通过日志定位到相关错误，但未能自行修复，疑似问题代码如下：

<View style={styles.body_container}>
  <FlatList
    numColumns={2}
    keyExtractor={item => item.numero_socio}
    data={procura(Contas)}
    renderItem={({ item }) => (
      <View style={styles.lista_contas}>
          <TouchableOpacity style={styles.button_icon}
            onPress={() => navigation.navigate('conta_consumo', {
            conta: {
              numero_socio: item.numero_socio,
              nome_tuna: item.nome_tuna,
              nome_completo: item.nome_completo,
              email: item.email,
              telemovel: item.telemovel,
              valor_conta: item.valor_conta,
              valor_maximo: item.valor_maximo
            },
            produtos: Produtos,
            utilizador: utilizador
          })}>
            
            <Icons 
              estilo_alterado = {styles.conta_icon}
              tipo = 'contas-icons' 
              nome = {item.nome_tuna}
              re_render = {true}
            />
          
          </TouchableOpacity>
          
          <Text style={styles.text_icon}>{item.nome_tuna.toUpperCase()}</Text>
        </View>
    )}
  />
</View>

可能的原因及修复方案 #

1. 替换TouchableOpacity为Pressable组件 #

部分安卓设备对TouchableOpacity的兼容性较差，React Native官方推荐的Pressable组件在触摸事件处理上更稳定，适配范围更广。

2. 扩大点击区域 #

平板设备的触摸精度或显示缩放可能导致点击未命中组件，通过hitSlop属性扩大可点击范围。

3. 阻止自定义组件拦截触摸事件 #

自定义Icons组件可能意外消耗触摸事件，需设置pointerEvents="none"确保事件传递到父级触摸组件。

4. 排查多列布局冲突 #

numColumns={2}的布局可能在特定平板设备上导致子项点击区域被挤压或遮挡，可暂时移除该属性测试是否恢复正常，再调整布局样式。

修改后的示例代码 #

<View style={styles.body_container}>
  <FlatList
    numColumns={2}
    keyExtractor={item => item.numero_socio}
    data={procura(Contas)}
    renderItem={({ item }) => (
      <View style={styles.lista_contas}>
        {/* 用Pressable替代TouchableOpacity */}
        <Pressable 
          style={styles.button_icon}
          onPress={() => navigation.navigate('conta_consumo', {
            conta: {
              numero_socio: item.numero_socio,
              nome_tuna: item.nome_tuna,
              nome_completo: item.nome_completo,
              email: item.email,
              telemovel: item.telemovel,
              valor_conta: item.valor_conta,
              valor_maximo: item.valor_maximo
            },
            produtos: Produtos,
            utilizador: utilizador
          })}
          {/* 扩大点击区域 */}
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        >
          {/* 阻止自定义组件拦截触摸事件 */}
          <Icons 
            estilo_alterado={styles.conta_icon}
            tipo='contas-icons' 
            nome={item.nome_tuna}
            re_render={true}
            pointerEvents="none"
          />
        </Pressable>
        
        <Text style={styles.text_icon}>{item.nome_tuna.toUpperCase()}</Text>
      </View>
    )}
  />
</View>

额外建议：检查React Native版本是否过旧，部分旧版本RN在安卓平板设备上存在触摸事件的已知bug，升级到最新稳定版本可能解决问题。

内容的提问来源于stack exchange，提问作者bestry