Reaccionar Comunicación nativo Expo WebView

votos
0

Estoy trabajando en una aplicación donde tengo que interactuar con una vista web. Esencialmente Tengo que llamar a una función en la vista web y capturar (de alguna manera) lo que devuelve.

Esencialmente, la clase padre tiene un botón. Este botón activa una función llamada en la clase de niño que envía un mensaje a la vista web. La vista web envía entonces un mensaje de vuelta que activa la onMessage()función. Así que mi pregunta es, básicamente, ¿Cómo puede la función de los padres testFunc()el acceso a los datos devueltos la vista web.

Aquí está un ejemplo simplificado de la clase hija.

export default class Child extends Component {
  sendMessageToWebView = () => {
    this.webview.postMessage(Hello WebView, from React Native);
  }

  html = () => {
    `<body>
     <script>
       document.addEventListener(message, function(data) {
         console.log(data);
         window.postMessage(Hello from WebView :));
       });
     </script>
    </body>`
  }

  onMessage = (data) => {
    console.log(data.nativeEvent.data);
    return data.nativeEvent.data;
  }


  render() {
    return (
      <View>
        <WebView
          ref={(view) => { this.webview = view; }}
          source={{ html() }}
          onMessage={this.onMessage}
        />
      </View>
    );
  }
}

Aquí está un ejemplo de la clase padre

export default class Parent extends Component {
  testFunc = () => {
    this.child.sendMessageToWebView();
  }

  render() {
    return (
      <View>
         <Button onPress={this.testFunc} title={'Test'} />
         <Child ref={child => {this.child = child}} />
      </View>
    );
  }
}

He pensado en el uso de los estados, pero terminar con un problema similar. ¿Cómo sabe la función de los padres cuando el estado ha cambiado en la clase hija.

Cualquier ayuda sería muy apreciada, gracias.

Publicado el 19/09/2018 a las 17:12
fuente por usuario
En otros idiomas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more