Expo项目使用@twotalltotems/react-native-otp-input报TypeError如何解决

错误根因 #

@twotalltotems/react-native-otp-input默认依赖纯React Native生态的剪贴板原生模块，Expo环境下没有内置该模块，调用剪贴板能力时就会抛出空对象报错。

优先推荐最简方案 #

如果你的业务不需要自动读取剪贴板填充验证码的功能，直接给组件添加isClipboardEnabled={false}属性即可禁用相关逻辑，直接规避报错：

import OTPInputView from '@twotalltotems/react-native-otp-input'

<OTPInputView
  // 保持你原有配置的属性不变
  isClipboardEnabled={false}
/>

修改后重启Expo服务，启动时加上--clear参数清除缓存即可生效：npx expo start --clear

需要保留剪贴板功能的方案 #

如果必须要使用自动填充验证码功能，按照以下步骤操作：

• 安装Expo官方剪贴板库：npx expo install expo-clipboard
• 安装patch-package工具用于持久化修改第三方依赖：npm install patch-package --save-dev
• 打开node_modules/@twotalltotems/react-native-otp-input/dist/index.js文件，做两处修改：
  1. 把原有导入Clipboard的代码替换为：import * as Clipboard from 'expo-clipboard'
  2. 找到代码中调用Clipboard.getString()的位置，将方法名改为Clipboard.getStringAsync()
• 执行命令生成补丁：npx patch-package @twotalltotems/react-native-otp-input，后续重新安装依赖会自动应用该补丁
• 清除缓存重启Expo服务即可

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