Блог

Вступление

Работа с этим обменом сообщениями между ReactNative и WebView и onMessage, похоже, не очень стабильна на IOS.

Однако на Android это работает просто отлично.

Я перепробовал кучу разных пакетов, но в итоге сделал это с нуля, и у меня даже не получается использовать простейший вариант для работы.

Проблема

Что работает, а что нет?

• Android: отправка и получение работает просто отлично
• IOS: отправка в WebView работает, получение от — нет

Визуальные результаты

Как видно на скриншотах в IOS, всякий раз, когда я пытаюсь отправить сообщение из содержимого webview в RN, выдается странная ошибка с сообщением «Ресурс не найден».

Код

App.js

  ...
 handleButtonPressed = () => {
    this.webview.postMessage("Hello from RN")
  }

  onMessage = (event) => {
    alert(event.nativeEvent.data)
  }

  render () {
    return (
      <View style={styles.container}>
        <View
          style={styles.webView}
        >
          <WebView
            ref={r => this.webview = r}
            source={html}
            onMessage={this.onMessage}
          />
        </View>
        <Button
          onPress={this.handleButtonPressed}
          title='Press me'
        />
      </View>
    )
  }
  ...
  

javascript импортированного html (без уточнения)

Этот код скомпилирован с использованием webpack amp; babel, но это точно не вызывает проблему.

 const button = document.getElementById('send')

document.addEventListener('message', function(data) {
  alert(data.data)
})

button.addEventListener('click', () => {
  window.postMessage("Sending data from WebView", "*")
})
  

Ошибка от expo

 [21:19:09] Error: invalid asset file path: `${filePath}
[21:19:09]     at Object.parse (/Users/jimvercoelen/Desktop/braintree-payment/node_modules/metro/src/node-haste/lib/AssetPaths.js:66:11)
[21:19:09]     at /Users/jimvercoelen/Desktop/braintree-payment/node_modules/metro/src/Assets.js:312:34
[21:19:09]     at Generator.next (<anonymous>)
[21:19:09]     at step (/Users/jimvercoelen/Desktop/braintree-payment/node_modules/metro/src/Assets.js:326:347)
[21:19:09]     at /Users/jimvercoelen/Desktop/braintree-payment/node_modules/metro/src/Assets.js:326:577
[21:19:09]     at new Promise (<anonymous>)
[21:19:09]     at /Users/jimvercoelen/Desktop/braintree-payment/node_modules/metro/src/Assets.js:326:258
[21:19:09]     at getAsset (/Users/jimvercoelen/Desktop/braintree-payment/node_modules/metro/src/Assets.js:326:58)
[21:19:09]     at /Users/jimvercoelen/Desktop/braintree-payment/node_modules/metro/src/Server.js:576:1722
[21:19:09]     at Generator.next (<anonymous>)
  

Deps

• «expo»: «^ 32.0.0»
• «react-native»: «https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz«,

Я потерял представление о том, что я пробовал, а что нет, но прямо сейчас больше не знаю, что попробовать, поскольку я не могу найти никаких похожих проблем.

Приветствуется любая помощь / ввод.

Спасибо!