React Native InAppBrowser报错：Cannot read property 'isAvailable' of null求助

注册表单创建用户后调用inAppBrowser函数时，始终报错：Cannot read property 'isAvailable' of null，但通过console.log打印InAppBrowser时显示为对象。

相关代码 #

import { useState } from "react";
import AuthContent from "../components/Auth/AuthContent";
import { createUser } from "../util/auth";
import LoadingOverlay from "../components/ui/LoadingOverlay";
import { InAppBrowser } from "react-native-inappbrowser-reborn";

function SignupScreen() {
  const [isAuthenticating, setIsAuthenticating] = useState(false);

  const inAppBrowser = () => {
    console.log(InAppBrowser);
    InAppBrowser.isAvailable()
      .then(() => {
        return InAppBrowser.open("https://www.google.com", {
          // ios Properties
          animated: true,
          modalEnabled: true,
          //Android Properties
          showTitle: true,
        });
      })
      .catch((err) => console.log(err));
  };

  async function signupHandler({ email, password }) {
    setIsAuthenticating(true);
    await createUser(email, password);
    setIsAuthenticating(false);
    inAppBrowser();
  }

  if (isAuthenticating) {
    return <LoadingOverlay message="Creating user..." />;
  }

  return <AuthContent onAuthenticate={signupHandler} />;
}

export default SignupScreen;

解决方案 #

1. 修正导入方式 #

react-native-inappbrowser-reborn采用默认导出而非命名导出，当前的命名导入会导致拿到的InAppBrowser实际为null（console.log打印的可能是模块包装对象而非可用实例）。将导入语句改为：

import InAppBrowser from "react-native-inappbrowser-reborn";

2. 验证原生模块链接 #

若修正导入后仍报错，检查原生模块是否正确链接：

• iOS：进入项目ios目录，执行pod install，重启Metro服务并重新编译项目。
• Android：执行cd android && ./gradlew clean，返回根目录后重启项目。

3. 确认调用时机 #

当前inAppBrowser的调用时机合理，若仍有问题，可在组件挂载后做初始化检查：

import { useState, useEffect } from "react";

// ... 其他代码 ...

useEffect(() => {
  // 组件挂载后验证库可用性
  InAppBrowser.isAvailable().catch(err => console.log("初始化检查失败：", err));
}, []);

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