是否有一种有效的方式来格式化大量注入的javascript字符串,并为react-native-webview保留类型完成和可测试功能?
对于react-native, react-native- WebView库允许跨本地WebView和react-native进行通信。这需要注入字符串格式的javascript来自定义要传递的内容以及如何处理用户交互。
这个注入很快就会变得混乱、不可读,或者在需要组合一堆功能时存在难以测试的小bug。
有人有更好的可扩展解决方案吗?
我对injectableStrings(影响Webview DOM)的要求
- 读语法
- 类型完成
react-native-webview文档以字符串格式提供了对javascript的简化引用,没有语法或类型补全。
当前方法和答案
- 创建Webview文件和注入文件
- 使用注入文件来包含所有web类型和功能。此功能在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();
`
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规格的旧设备有用…)
- 使用一堆模板文字。缺点:这可能会变得混乱,并且与使用纯字符串非常相似。无类型完井)