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问题构建

回答

相关问题