React Native 如何加载运行来自CDN的第三方JS脚本

报错核心原因 #

• 你下载的Xendit.min.js是面向浏览器环境打包的脚本，默认会将实例挂载到浏览器window对象上，不符合ES模块导出规范，也没有适配React Native的运行环境（RN不存在浏览器的window、document等全局API）
• 直接用ES模块语法导入时，脚本没有默认导出你需要的Xendit实例，所以调用setPublishableKey会提示方法不存在。

可行解决方案 #

方案1：使用官方适配的React Native SDK（优先推荐） #

Xendit官方提供了适配React Native环境的SDK，完全兼容RN运行环境，不会出现环境依赖报错，直接按官方文档安装调用即可。

方案2：通过WebView嵌套运行浏览器端脚本 #

如果必须使用原CDN脚本的能力，可以将脚本逻辑放在WebView的浏览器环境中运行，RN端和WebView通过postMessage通信传递数据和结果，示例代码如下：

import { WebView } from 'react-native-webview';
import { KEY } from '@myUtils/XenditUtils';

const XenditCardValidator = ({ cardNumber, onValidationComplete }) => {
  // 注入WebView的执行逻辑
  const injectedJS = `
    (function(){
      const validateResult = window.Xendit.card.validate('${cardNumber}');
      window.ReactNativeWebView.postMessage(JSON.stringify({
        cardValid: validateResult
      }));
    })();
    true;
  `;

  // 内嵌HTML，直接引入CDN脚本
  const webHtml = `
    <html>
      <head>
        <script type="text/javascript" src="https://js.xendit.co/v1/xendit.min.js"></script>
        <script>window.Xendit.setPublishableKey('${KEY}')</script>
      </head>
      <body></body>
    </html>
  `;

  return (
    <WebView
      source={{ html: webHtml }}
      injectedJavaScript={injectedJS}
      onMessage={e => {
        const res = JSON.parse(e.nativeEvent.data);
        onValidationComplete(res.cardValid);
      }}
      style={{ width: 0, height: 0 }} // 隐藏WebView不占用布局
    />
  )
}

方案3：修改本地脚本导出（仅作为临时调试方案） #

如果要尝试本地导入脚本运行，可手动修改下载的Xendit.min.js文件，在文件末尾添加一行导出代码：

module.exports = window.Xendit;

导入时改用CommonJS语法：

const Xendit = require('@myUtils/Xendit.min');

注意：该方案仅在脚本不依赖任何浏览器专属API时可正常运行，只要脚本用到window、document等浏览器API，RN环境下依然会抛出报错。

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