React Native for Web环境下Pressable组件失效的解决方法及替代方案

1. 基础问题排查 #

1.1 修正代码语法错误 #

你提供的测试代码存在变量声明缺失的语法问题，会导致组件逻辑异常，先修正为：

import React from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';

// 增加const关键字声明组件变量
export const Button = (props) => {
  const { onPress } = props;
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>Save</Text>
    </Pressable>
  );
}

1.2 确认依赖版本符合要求 #

Pressable在web端无响应绝大多数是依赖版本不兼容导致：

• react-native-web 版本需 >= 0.18.0，低于该版本仅部分实现Pressable逻辑，onPress事件不会触发
• 若使用Expo框架，需保证Expo SDK版本 >= 44，低于该版本内置的react-native-web适配层未对齐Pressable的事件绑定逻辑

升级对应依赖后重启服务，绝大多数场景下Pressable即可正常工作。

小提示：如果升级依赖后Pressable仍无响应，可检查组件样式是否设置了pointerEvents: none，或者是否被更高层级的元素遮挡导致点击事件被拦截。

2. 版本锁死无法升级的兼容方案 #

如果项目依赖版本被锁死无法升级，可以用以下两种方案兼容，均不需要修改上层业务逻辑：

2.1 自制跨端Pressable垫片 #

基于平台判断封装统一API的Pressable组件，完全对齐官方API：

import { Platform, Pressable as NativePressable } from 'react-native';

const Pressable = Platform.select({
  web: require('react-native-web/dist/cjs/components/Pressable/Pressable').default,
  default: NativePressable
});

export default Pressable;

业务代码中引入该自定义Pressable替换react-native导出的默认组件即可。

2.2 社区兼容组件替代 #

可直接使用对齐官方Pressable API的跨端兼容组件，同时兼容Expo、React Native、React Native Web三端，不需要额外适配样式和事件逻辑，未来可以无缝切换回官方组件。

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