react-native-otp-verify报is not a function错误及验证方案咨询

• 核心原因1：你当前使用的是Expo托管工作流，react-native-otp-verify是包含安卓/iOS原生代码的原生模块，Expo托管环境没有预集成该模块的原生实现，会导致API undefined。解决方法：执行expo prebuild生成原生项目后再编译运行，或者更换为Expo官方适配的短信检索库。
• 核心原因2：该库部分版本不支持默认导入，你的导入方式错误。将导入代码改为import * as RNOtpVerify from 'react-native-otp-verify'即可解决找不到函数的问题。
• 代码逻辑错误：你使用的是函数组件，代码中调用this.otpHandler、this.setState的写法是类组件语法，函数组件中不存在this指向，需要替换为useState和直接调用函数的写法，同时useEffect需要添加空依赖数组，避免每次渲染都重复移除监听器。

修正后的代码示例：

import * as RNOtpVerify from 'react-native-otp-verify';
import { useState, useEffect } from 'react';
import { Keyboard } from 'react-native';

function HomeScreen(props) {
    const [otp, setOtp] = useState('');

    const getHash = () =>
        RNOtpVerify.getHash()
            .then(console.log)
            .catch(console.log);

    const otpHandler = (message) => {
        const otp = /(\d{4})/g.exec(message)?.[1];
        if(otp) {
            setOtp(otp);
            RNOtpVerify.removeListener();
            Keyboard.dismiss();
        }
    }

    const startListeningForOtp = () =>
        RNOtpVerify.getOtp()
            .then(() => RNOtpVerify.addListener(otpHandler))
            .catch(console.log);

    useEffect(() => {
        return () => RNOtpVerify.removeListener();
    }, []);
// 其余逻辑
}

• 仅靠客户端库无法完成完整的短信验证功能，必须搭配后端服务实现。客户端仅能完成自动读取短信填充验证码的功能，验证码的生成、下发、有效期校验、防刷策略都需要在服务端实现，否则会出现严重的安全漏洞，可被恶意用户绕过验证。
• 推荐方案：
  1. 后端对接第三方短信服务商的接口，负责生成随机验证码、存储验证码与手机号的对应关系、调用短信接口下发带验证哈希的短信、接收客户端提交的验证码进行校验。
  2. 客户端使用短信检索库自动读取短信填充验证码，减少用户手动输入成本。
  3. 若你使用Expo生态，优先选择Expo官方适配的短信检索模块，无需额外配置原生代码，兼容性更好。

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