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

Question

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

对于react-native, react-native- WebView库允许跨本地WebView和react-native进行通信。这需要注入字符串格式的javascript来自定义要传递的内容以及如何处理用户交互。

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

有人有更好的可扩展解决方案吗?

我对injectableStrings(影响Webview DOM)的要求

1. 读语法
2. 类型完成

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

Answer 1

当前方法和答案

1. 创建Webview文件和注入文件
2. 使用注入文件来包含所有web类型和功能。此功能在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();
`

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