2016-12-21 27 views
9

Tôi sử dụng chế độ xem web Phản hồi gốc để hiển thị index.html và HTML sẽ đăng sự cố vào ứng dụng. Sau đó, ứng dụng sẽ nhận được tin nhắn và viết nó vào bảng điều khiển. Vấn đề là ứng dụng không thể nhận tin nhắn, khi postMessage được chạy ngay lập tức trên đầu. Tôi nghĩ rằng nó có thể liên quan đến HTML không tải xong. Sau đó tôi đã sử dụng một sự chậm trễ với setTimeout và nó hoạt động.phản hồi postMessage html gốc không thể truy cập vào WebView

Bây giờ tôi muốn biết:

  • Có cách nào tốt hơn để giải quyết vấn đề này?
  • Tại sao sự chậm trễ 100 milliscond không hoạt động, nhưng trì hoãn 200 milliscond đã làm?

Tôi đang sử dụng React Native phiên bản 0.39.0 và phiên bản Node 7.2.0.

Dưới đây là đoạn code tôi có cho đến nay:

index.html

<head> 
<title>Index</title> 
<script type="text/javascript" src="index.js"></script> 
<script type="text/javascript"> 
    // can not be received 
    postMessage('send to react native from index inline, no delay', '*'); 

    // can not be received 
    setTimeout(function(){ 
     postMessage('send to react native from index inline, delay 0 milliscond', '*') 
    }, 0); 

    // can received 
    setTimeout(function(){ 
     postMessage('send to react native from index inline, delay 100 milliscond', '*') 
    }, 100); 

    onload = function() { 
     // can not be received 
     postMessage('send to react native from index inline after onload, no delay', '*') 

     // can received 
     setTimeout(function() { 
      postMessage('send to react native from index inline after onload, delay 0 milliscond', '*') 
     }, 0); 
    }; 
</script> 

index.js

// can not be received 
postMessage('send to react native from index.js, no delay', '*'); 

// can not be received 
setTimeout(function() { 
    postMessage('send to react native from index.js, delay 100 milliscond', '*') 
}, 100); 

// can received 
setTimeout(function() { 
    postMessage('send to react native from index.js, delay 200 milliscond', '*') 
}, 200); 

Phản ứng web_view_page.js Native

return (
     <WebView 
      source={{uri: 'http://127.0.0.1:8000/index.html'}} 
      onMessage={(event) => console.log('onMessage:', event.nativeEvent.data)}/> 
    ); 

Chrome console log

2016-12-21 11:45:02.367 web_view.js:147 onMessage: send to react native from index inline after onload, delay 0 milliscond 
2016-12-21 11:45:02.491 web_view.js:147 onMessage: send to react native from index inline, delay 100 milliscond 
2016-12-21 11:45:02.628 web_view.js:147 onMessage: send to react native from index.js, delay 200 milliscond 

Trả lời

1

tôi chắc chắn rằng bạn đã tìm thấy câu trả lời của bạn bằng cách bây giờ, nhưng trong trường hợp bạn chưa hoặc nếu người khác có nhu cầu sau đó kiểm tra https://github.com/facebook/react-native/issues/11594.

Về cơ bản, bạn cần đợi postMessage để hiển thị trong cửa sổ trước khi chúng tôi có thể đăng tin nhắn thành công.

function onBridgeReady(cb) { 
    if (window.postMessage.length !== 1) { 
    setTimeout(function() { 
     onBridgeReady(cb) 
    }, 100); 
    } else { 
    cb(); 
    } 
} 

onBridgeReady(function() { 
    window.postMessage('Bridge is ready and WebView can now successfully receive messages.'); 
}); 

Nguồn: Andrei Barabas

Các vấn đề liên quan