React Native中是否有useScript钩子？如何引入调用外部脚本？

React Native 本身没有对应 web 端的useScript钩子——因为它的运行环境并非浏览器，无法像网页那样直接通过<script>标签加载外部脚本，因此 web 端的useScript无法直接在 RN 中使用。针对你需要加载外部脚本并调用TEST_SCRIPT.start()的需求，以下是几种可行的替代方案：

方案1：使用react-native-webview加载脚本（最直接） #

利用 webview 的浏览器环境加载外部脚本，再通过通信机制调用脚本方法：

• 安装依赖：npm install react-native-webview
• 示例组件代码：

import React, { useRef } from 'react';
import { Button } from 'react-native';
import { WebView } from 'react-native-webview';

const ExternalScriptRunner = () => {
  const webviewRef = useRef(null);

  const triggerScriptMethod = () => {
    webviewRef.current?.injectJavaScript(`
      TEST_SCRIPT.start();
      true; // 必须返回true，否则injectJavaScript会抛出错误
    `);
  };

  // 构建包含外部脚本的HTML内容
  const embeddedHtml = `
    <html>
      <body>
        <script src="https://pm28k14qlj.codesandbox.io/test-external-script.js"></script>
      </body>
    </html>
  `;

  return (
    <>
      <Button title="启动脚本方法" onPress={triggerScriptMethod} />
      <WebView
        ref={webviewRef}
        source={{ html: embeddedHtml }}
        style={{ height: 0, width: 0 }} // 隐藏webview，仅用其执行脚本
        javaScriptEnabled={true}
      />
    </>
  );
};

export default ExternalScriptRunner;

• 说明：这种方式兼容所有浏览器端脚本，适合不需要频繁交互的场景，唯一的开销是额外的 webview 实例。

方案2：将脚本本地化后作为模块引入 #

如果脚本内容允许下载修改，直接将其转为 RN 兼容的模块：

• 步骤1：下载目标脚本的代码，保存到 RN 项目中（比如src/scripts/testScript.js）
• 步骤2：修改脚本，将全局对象转为模块导出：

// 修改后的testScript.js
const TEST_SCRIPT = {
  start: () => {
    // 原脚本中的start方法逻辑
  }
};

export default TEST_SCRIPT;

• 步骤3：在组件中直接引入调用：

import TEST_SCRIPT from './src/scripts/testScript';

// 在需要的时机调用
TEST_SCRIPT.start();

• 说明：这是性能最优的方案，没有额外运行时开销，但仅适用于静态可修改的脚本。

方案3：下载脚本后用eval执行（不推荐生产环境） #

通过文件下载工具获取脚本内容，再用eval执行，此方法存在安全风险，且 Hermes 引擎对eval支持有限：

• 安装依赖：npm install react-native-fs
• 示例代码：

import RNFS from 'react-native-fs';

const loadAndRunScript = async () => {
  const scriptUrl = 'https://pm28k14qlj.codesandbox.io/test-external-script.js';
  const localFilePath = `${RNFS.DocumentDirectoryPath}/testScript.js`;

  try {
    // 下载脚本到本地
    await RNFS.downloadFile({
      fromUrl: scriptUrl,
      toFile: localFilePath,
    }).promise;

    // 读取脚本内容
    const scriptContent = await RNFS.readFile(localFilePath, 'utf8');

    // 执行脚本，全局会生成TEST_SCRIPT对象
    eval(scriptContent);

    // 调用目标方法
    TEST_SCRIPT.start();
  } catch (error) {
    console.error('脚本加载失败:', error);
  }
};

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