如何在React Native中将JS/TS文件作为文本导入并注入WebView？

一、导入独立JS文件作为字符串注入 #

最简单的方案是直接将JS代码以字符串形式导出，无需额外修改打包工具配置：

1. 创建独立JS文件：新建webview-inject.js，把要注入的代码用模板字符串包裹并导出：

// webview-inject.js
export default `
  // 这里编写Web端要执行的JS逻辑
  document.body.style.backgroundColor = '#f0f0f0';
  alert('注入脚本已执行');
`;

2. 在React Native组件中使用：直接导入后传入WebView的对应属性：

import React from 'react';
import { WebView } from 'react-native-webview';
import injectedScript from './webview-inject';

export default function App() {
  return (
    <WebView
      source={{ uri: 'https://example.com' }}
      injectedJavaScript={injectedScript}
      javaScriptEnabled={true}
    />
  );
}

如果不想用模板字符串包裹，也可以通过修改Metro配置将JS文件当作静态资源处理：

• 修改metro.config.js，添加JS到资源扩展名列表并配置转换器：

const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push('js');
config.transformer.babelTransformerPath = require.resolve('react-native-transformer-js-to-string');

module.exports = config;

• 安装依赖：npm install react-native-transformer-js-to-string --save-dev
• 导入方式调整为：

const injectedScript = require('./webview-inject.js').default;

二、编写TypeScript代码并转换为JS注入 #

要兼顾TS的类型检查和可注入的JS字符串，有两种实用方案：

方案1：将TS函数转为自执行字符串 #

这种方式既能利用TS的类型校验，又能直接生成可注入的代码：

1. 创建TS文件：新建webview-inject.ts，编写带类型的逻辑函数，再转为自执行字符串：

// webview-inject.ts
// 带类型检查的注入逻辑
function injectLogic() {
  const body = document.querySelector<HTMLElement>('body');
  if (body) {
    body.style.padding = '20px';
    body.style.color = '#333';
  }
  console.log('TS编写的注入脚本执行完成');
}

// 转换为自执行的JS字符串
export default `(${injectLogic.toString()})()`;

2. 组件中导入使用：和JS文件的用法完全一致，React Native默认编译流程会自动将TS转译为JS：

import injectedScript from './webview-inject';

// 传入WebView的injectedJavaScript属性即可

方案2：用打包工具编译TS为独立JS字符串 #

如果注入逻辑复杂，可通过Webpack/Rollup将TS编译为单文件JS，再读取为字符串：

1. 配置Webpack：新建webpack.config.js，将TS编译为IIFE格式：

module.exports = {
  entry: './webview-inject.ts',
  output: {
    filename: 'injected-script.js',
    libraryTarget: 'self',
    format: 'iife'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
};

2. 编译并导出为字符串：运行webpack编译后，可手动将生成的JS内容用模板字符串包裹导出，或用Node脚本自动生成导出文件：

// Node脚本示例：自动读取编译后的JS内容并生成导出文件
const fs = require('fs');
const content = fs.readFileSync('./dist/injected-script.js', 'utf8');
fs.writeFileSync('./src/injected-script.ts', `export default \`${content}\``);

注意事项 #

• 注入的代码运行在WebView的浏览器上下文，只能使用浏览器原生API，无法直接调用React Native方法（需通信可使用postMessage）。
• 若需要在页面加载前注入代码，可使用injectedJavaScriptBeforeContentLoaded属性。

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