在 react-native 中注入 javascript 的最佳方式是什么？答案

【问题标题】：What is the best way format injected javascript in react-native?在 react-native 中注入 javascript 的最佳方式是什么？
【发布时间】：2021-12-08 19:09:48
【问题描述】：

是否有一种有效的方式格式化大量注入的 javascript 字符串并为 react-native-webview 保留类型完成 + 可测试功能？

对于 react-native，react-native-webview 库允许跨原生 WebView 和 react-native 进行通信。这需要以字符串格式注入 javascript 来自定义通信内容以及处理用户交互的方式。

当需要组合一堆功能时，这种注入会很快变得混乱、不可读或出现难以测试的小错误。

有人对此有更好的可扩展解决方案吗？

我对可注入字符串的要求（影响 Webview DOM）

可读语法
类型完成

react-native-webview docs 以没有语法或类型补全的字符串格式提供对 javascript 的简化引用。

【问题讨论】：

标签： javascript react-native react-native-webview

【解决方案1】：

目前的方法和答案

创建一个 Webview 文件和一个注入文件。
利用注入文件包含所有网络类型和功能。此功能采用 javascript 格式（未字符串化）
创建一个将所有功能转换为功能的字符串版本的初始化程序。初始化程序应始终返回字符串。

例子

Browser.injectableJavascript.ts

const registerPressHandler = () => {
 const imgNodes = document.getElementsByTagName('img')
 const linkNodes = document.getElementsByTagName('a')

 // add callbacks etc...
}

// re-registers events whenever the document re-renders nodes...
const createObservers = () => {
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      // handle cases here...and rebind events to new nodes
      registerPressHandler()
    })
  })

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  })
}

export const browserInjection = `
  ${registerPressHandler.toString()};
  // initialize web click handler
  registerPressHandler()

  ${createObservers.toString()};
  createObservers();
`

浏览器.tsx

import React from 'react'
import Webview from 'react-native-webview'
import { browserInjection } from './Browser.injections'

const Browser = () => {
  return <Webview injectedJavascript={browserInjection} />
}

export default Browser

其他想法：

利用捆绑程序编译 javascript 文件的字符串化版本。（缺点：它的处理能力更强，速度不如第一种方法）（优点：浏览器兼容性更好，但不需要大多数 polyifill，因为这仅针对 android 和 iOS webviews...可能对旧设备有用降低 webview 规格...）
使用一堆模板文字。（缺点：这可能会变得混乱，并且与使用纯字符串非常相似。没有类型完成）

【讨论】：