React原生WebView JavaScript問題構建

我有一個支持在線聊天支持（使用對講）的Android版React Native應用程序。要訪問Intercom，我使用WebView和injectedJavaScript來顯示UI。它工作正常，在我的開發建設，但是當我做一個發佈版本它會抱怨不能找到window.Intercom（我得到了相同的相對問題，如果我刪除window.）React原生WebView JavaScript問題構建

下面的代碼我試圖運行

IntercomContainer.js

// ============================================================================= 
// Components >> IntercomContainer 
// ============================================================================= 
// @flow 

// Import 
// ============================================================================= 

import * as React from 'react'; 
import { View, WebView } from 'react-native'; 
import Spinner from 'react-native-loading-spinner-overlay'; 

import styles from './styles'; 

// Content 
// ============================================================================= 

type State = { 
    isLoading: boolean, 
}; 

type Props = { 
    appId: string, 
} 

// Render 
// ============================================================================= 

export default class IntercomContainer extends React.Component<Props, State> { 

    props: Props = { 
     appId: '', 
    }; 

    state: State = { 
     isLoading: true, 
    } 

    setState: Function; 

    injectedJS = (appId: string) => { 
     return ` 
      try { 

       window.Intercom('boot', { 
        app_id: '${appId}', 
       }); 

       window.Intercom('show'); 
       window.Intercom('onShow', function() { 
        document.getElementById('message').innerHTML = ''; 
        setTimeout(() => { 
         document.getElementById('message').innerHTML = 'Click on the chat button in the bottom-right to open chat...'; 
        }, 1000) 
       }); 

      } catch(e) { 
       alert('Intercom failed to load: ' + e.message); 
      } 
     `; 
    } 

    onLoadEnd =() => { 
     this.setState({ 
      isLoading: false, 
     }); 
    } 

    render(){ 
     const { appId } = this.props; 
     const { isLoading } = this.state; 

     return (
      <View style={styles.container}> 
       <Spinner visible={isLoading} /> 
       <WebView 
        injectedJavaScript={this.injectedJS(appId)} 
        source={require('./IntercomWebView.html')} 
        onLoadEnd={this.onLoadEnd} 
        javaScriptEnabled={true} 
        style={styles.webView} 
       /> 
      </View> 
     ); 
    } 
}

IntercomWebView.html

<!DOCTYPE html> 
<head> 
    <script> 
     // intercom JS library 
     var APP_ID = ''; 
     (function(){ 
      debugger; 
      console.log("Executing function main..."); 
      var w=window; 
      var ic=w.Intercom; 
      if (typeof ic === "function") { 
       ic('reattach_activator'); 
       ic('update',intercomSettings); 
      } else { 
       var d=document; 
       var i= function() { 
        i.c(arguments) 
       }; 
       i.q=[]; 
       i.c=function(args){ 
        i.q.push(args) 
       }; 
       w.Intercom=i; 

       function l(){ 
        debugger; 
        console.log("Executing function l..."); 
        var s=d.createElement('script'); 
        s.type='text/javascript'; 
        s.async=true; 
        s.src='https://widget.intercom.io/widget/' + APP_ID; 
        var x=d.getElementsByTagName('script')[0]; 
        x.parentNode.insertBefore(s,x); 
       } 

       if(w.attachEvent){ 
        w.attachEvent('onload',l); 
       }else{ 
        w.addEventListener('load',l,false); 
       } 
      } 
     })(); 
    </script> 
    <style> 
     main { 
      align-items: center; 
      background-color: #fefefe; 
      color: #999; 
      display: flex; 
      font-family: sans-serif; 
      height: 80vh; 
      justify-content: center; 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <main id="message"> 
     loading... 
    </main> 
</body> 
</html>

謝謝！

來源

2017-10-09 WolfieZero

最有可能的問題的根本原因是postMessage錯誤。您的代碼使用Intercom對象正在加載之前 JavaScript代碼啓動此對象。作爲一種解決方法，你可以用setTimeout這個代碼來調用這個代碼，或者實現more "neat" solution，你可以在這裏推遲Intercom對象的實際調用，直到它初始化爲止。

來源

2017-10-16 22:14:31

太棒了，謝謝。當我有機會並且回報時，我會放棄這一點。謝謝！ – WolfieZero

@WolfieZero是否曾經工作過？ – Jordash

React原生WebView JavaScript問題構建

回答

相關問題