React Native引入hotp-totp库报default不是函数错误求助

报错根因 #

• 导入写法错误：查看hotp-totp源码可知，库的默认导出是包含hotp、totp两个方法的对象，并非直接导出totp函数。原有写法import totp from 'hotp-totp'拿到的是整个导出对象，直接将对象作为函数调用，就会触发「xxx is not a function」的报错。
• 函数调用逻辑错误：库中实现的totp、hotp均为async异步函数，同步调用时拿到的返回值是Promise对象，无法直接得到OTP字符串用于渲染。
• 运行环境不兼容：该库依赖Web标准的crypto.subtle全局API，React Native默认JS运行环境没有内置该API，修正前两个问题后，Android端运行依然会触发crypto未定义的错误。
• 附加问题：贴出的App.js代码中使用了SafeAreaView、ScrollView组件，但未添加对应导入，运行时也会触发组件未定义的报错。

修复步骤 #

1. 安装crypto polyfill补全React Native环境缺失的API：

npm install react-native-quick-crypto

iOS端安装完成后进入ios目录执行pod install完成原生依赖关联，0.60以上版本React Native无需手动link。
2. 在项目入口文件（通常是根目录的index.js）最顶部引入polyfill，确保在业务代码加载前完成全局API注入：

import 'react-native-quick-crypto/lib/polyfill';

3. 修正otp.js文件的导入逻辑和异步调用逻辑，用状态存储生成的OTP值：

//otp.js
import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import otpModule from 'hotp-totp';
const { totp } = otpModule;

const OTP  = () => {
  const [token, setToken] = useState('------');
  const secret = 'MNWRM734ZIOEZYEYCAW4I6EX';

  useEffect(() => {
    const genOtp = async () => {
      const otpVal = await totp(secret);
      setToken(otpVal);
      // 如需30秒自动刷新OTP，可在此处添加定时器逻辑
    };
    genOtp();
  }, []);

  return (
    <View>
      <Text>{token}</Text>
    </View>
  )
}

export default OTP

4. 补全App.js中缺失的组件导入：

//App.js
import React from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import OTP from './otp.js';

const App = () => {
  return (
    <SafeAreaView>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <OTP />
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

完成以上步骤后重新打包运行即可正常生成并展示TOTP验证码。

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