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

Question

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

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

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

有没有人有更好的可扩展解决方案？

我对injectableStrings的要求（影响Webview DOM）

1. 可读的语法
2. 类型补全

react-native-webview 文档以字符串格式提供了对 javascript 的简化引用，这些格式没有语法或类型完成。

Answer 1

当前的方法和答案

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

例子

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 文件的字符串化版本。 （缺点：它的处理能力更强，不如第一种方法快）（优点：浏览器兼容性更高，但不需要大多数 polyifills，因为这仅针对 android 和 iOS webviews ......可能对旧设备有用较低的 webview 规格...）
• 使用一堆模板文字。 （缺点：这可能会变得混乱，并且与使用纯字符串非常相似。没有类型完成）