javascript - onmessage - react native communicate with webview

Actualizar el valor de un elemento en el componente React desde iOS UIWebView

Question

Estoy tratando de transferir datos de la aplicación iOS nativa a una aplicación web Reaccionar (no reaccionar) que se ejecuta en un UIWebView.

Obtengo una cadena de viewcontroller nativo y necesito "inyectarla" en el valor de un elemento <input> dentro de una clase de componente React. Le di al elemento una id como esta:

render() {
<div>
...
    <input id="iccid" type="text" name="iccid" pattern="/d*" onChange={this.iccidChanged.bind(this)} autoFocus />
...
</div>
}

Luego, uso JavaScriptCore desde iOS (código Swift) y ejecuto:

self.context = self.webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as? JSContext
self.context!.evaluateScript("document.getElementById(''iccid'').value=''/(barcodeValue)'';") 

Esto parece funcionar bien y puedo ver el valor actualizado en el DOM dentro de la vista web, el problema es que mi función React onChange (que valida el valor y cambia el estado del componente) no se activa ya que React no interpreta esto como un cambio (probablemente porque de DOM vs manejo virtual de DOM).

¿Cuál es la forma / práctica recomendada de actualizar el valor del elemento de iOS Y obtener que el componente React se comporte como lo ha escrito el usuario?

Answer 1

Supongo que desea activar un evento cuando se escanea un código de barras. Su aplicación de iOS probablemente no necesita saber dónde debe enviarse el evento (es decir, qué campo de entrada y cómo). Debería ser suficiente para indicarle a la vista web que se ha escaneado un código de barras.

Puede enviar un evento DOM personalizado a la window y hacer que algún componente de React escuche ese evento.

window.dispatchEvent(new CustomEvent(''barcodescan'', {
  detail: {
    value: ''(barcodeValue)''
  }
}))

A continuación, puede crear un componente sin representación que escuche el evento del código de barras:

const BarcodeListener = React.createClass({
  propTypes: {
    onBarcodeScan: React.PropTypes.func.isRequired
  },
  componentDidMount () {
    window.addEventListener(''barcodescan'', this.handleBarcodeScan)
  },
  componentWillUnmount () {
    window.removeEventListener(''barcodescan'', this.handleBarcodeScan)
  },
  render () {
    return null
  },
  handleBarcodeScan (e) {
    this.props.onBarcodeScan(e)
  }
})

Luego, en su forma, puede procesar la entrada junto con el oyente del evento del código de barras:

  render () {
    return (
      <div>
        ...
        <input ... />
        <BarcodeListener onBarcodeScan={this.handleBarcodeScan} />
      </div>
    )
  }

Luego maneje el evento de escaneo de código de barras por separado.