React Native Expo WebView Communication - PullRequest
Новая
       15

React Native Expo WebView Communication

0 голосов
/ 19 сентября 2018

Я работаю над приложением, в котором мне нужно взаимодействовать с веб-представлением.По сути, мне нужно вызвать функцию в веб-просмотре и захватить (каким-то образом), что она возвращает.

По сути, родительский класс имеет кнопку.Эта кнопка запускает функцию, вызываемую в дочернем классе, которая отправляет сообщение в веб-просмотр.Затем веб-просмотр отправляет сообщение обратно, которое вызывает функцию onMessage().Поэтому мой вопрос в основном таков: Как родительская функция testFunc() может получить доступ к данным, которые вернул веб-просмотр.

Вот упрощенный пример дочернего класса. 

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>
    );
  }
}

Вот пример родительского класса 

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>
    );
  }
}

Я думал об использовании состояний, но в итоге столкнулся с аналогичной проблемой.Как родительская функция знает, когда состояние было изменено в дочернем классе.

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 02 февраля 2019

Вы можете установить состояние в дочернем классе после получения данных.Затем мы можем вызвать функцию sendData в родительском классе, чтобы обновить состояние этого родительского класса новыми данными. 

export default class Child extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  ...

  onMessage = (data) => {
    const data = data.nativeEvent.data;
    this.setState({ data: data }, sendToParent);
  }

  sendToParent = () => {
    this.props.sendData(this.state.data);
  }
  ...

Затем можно получить доступ к состоянию дочернего класса из родительского класса * 1005.*

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

 ...

 sendData = (data) => {
   this.setState({ data: data });
 }

 ...

}
...