鍍金池/ 問答/HTML/ react native webview 打包后message通信很慢

react native webview 打包后message通信很慢

我用webview這個組件,打開了一個本地的vue項目的一個頁面,然后通過該頁面的一個<a/>的點擊事件,給reactnative傳遞<a/>的href地址,reactnative通過linking在瀏覽器中打開該href的頁面。

問題就是:
在開發(fā)調試react-native run-android的環(huán)境,每次點擊<a/>標簽的都能迅速打開瀏覽器并加載頁面,但是在打包cd android && gradlew assembleRelease和安裝app后,每次點擊<a>標簽都要30s以上的反應時間,并且這段時間,不能進行任何操作,我個人感覺就是js阻塞了,baidu,google都查過,大多都是關于webview的簡單用法,關于webview假死的資料很少,束手無策啊。

RN組件代碼如下:

import React from 'react';
import { View, Text, WebView, ToastAndroid, Linking } from 'react-native';
import { connect } from 'dva/mobile';
import { FullLoading } from '@/components/common';
import { container, bg } from '@/styles/base';
import { HomeHeader } from '@/components/layout/headers';

@connect(state=>({...state}))
class Information extends React.Component{
    static navigationOptions = HomeHeader;
    constructor(props){
        super(props);
        this.state={
            isLoading:false
        }
    }

    //加載開始
    onLoadStart(){
        this.setState({isLoading:true});
    }

    //加載結束
    onLoadEnd(){
        this.setState({isLoading:false});
    }

    //搜索
    onHeaderRightClick(){
        let { hotwordList } = this.props.search;
        let name = !!hotwordList && !!hotwordList[0] && hotwordList[0].name || HOT_WORD;
        this.props.navigation.navigate({routeName:'Search', params:{hotword:name}})

    }

    //注入腳本
    injectJavaScript(){
        return  `
            var oLink = document.getElementById('github-link');
            oLink.onclick = function(event){
                window.postMessage(this.href);
                event.preventDefault();
            }
        `
    }
    
    //接受網頁消息
    onMessage(e){
        console.log(e)
        Linking.openURL(e.nativeEvent.data).catch(err => ToastAndroid.show('出錯了', 1000));
    }
    componentDidMount(){
        this.props.navigation.onHeaderRightClick = this.onHeaderRightClick.bind(this);
    }
    render(){
        // let baseUrl = 'http://10.0.1.110:8080/about';
        let baseUrl = 'file:///android_asset/web/index.html#/about';
        return(
            <View style={[container.view_]}>
                {this.state.isLoading && <FullLoading type="center"/>}
                <WebView
                      onLoadStart={this.onLoadStart.bind(this)}
                      onLoadEnd={this.onLoadEnd.bind(this)}
                      style={{width:'100%', height:'100%', backgroundColor:'#fff'}}
                    source={{
                        uri: baseUrl,
                        method: 'GET'
                    }}
                    renderError={(e) => {
                        console.log(e, 'renderError')
                        return <View><Text>renderError回調了,出現錯誤</Text></View>
                    }}

                    domStorageEnabled={true}
                    javaScriptEnabled={true}
                    mixedContentMode="always"
                     scalesPageToFit={true}
                     onMessage={this.onMessage.bind(this)}
                     injectedJavaScript={this.injectJavaScript()}
                />
            </View>
        )
    }
}
export default Information;

VUE項目的代碼如下,a標簽點擊后,給RN傳遞消息,RN接受后,手機自動打開瀏覽器,并跳轉gay站:

<style src="../../assets/css/about/index.css" scoped></style>
<template>
    <div class="about">
        <div class="main">
            <div class="info-box">
                <div class="bg">
                    <Clock></Clock>
                </div>
                <div class="avatar">
                    <img src="../../assets/img/avatar.jpg">
                </div>
                <div class="describe">
                    <div class="name color-black font-20">
                        xxxxxxx
                    </div>
                    <div class="intr color-gray font-14 margin-top-5">
                        xxxxxxx
                    </div>
                </div>
                <div class="footer">
                    <a id="github-link"  class="icon-github"></a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Clock from './clock.vue';
    export default{
        name:'about',
        components:{
            Clock
        }
    }
</script>

有大牛知道是啥原因嗎?

回答
編輯回答
瘋子范

請問樓主有沒有最后解決調這個問題?

2017年2月20日 22:25