Enfoque actual y respuesta

1. Cree un archivo Webview y un archivo de inyección.
2. Utilice el archivo de inyección para contener todos los tipos y funciones web. Esta funcionalidad está formateada en javascript (no en forma de cadena)
3. Cree un inicializador que convierta toda la funcionalidad en una versión de cadena de la funcionalidad. El inicializador siempre debe devolver una cadena.

Ejemplo

Navegador.inyectableJavascript.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(); `

Navegador.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

Otras ideas:

• Aproveche un paquete para compilar una versión en cadena de un archivo javascript. (contras: es más potencia de procesamiento y no tan rápido como el primer enfoque) (pros: mucha más compatibilidad con el navegador, pero la mayoría de los polyifills no serán necesarios ya que esto solo está dirigido a vistas web de Android e iOS... podría ser útil para dispositivos más antiguos en especificaciones webview inferiores...)
• Use un montón de literales de plantilla. (contras: esto puede ensuciarse y es muy similar al uso de cadenas puras. No se completa el tipo)