H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】react native webview 打包后message通信很慢

我用webview这个组件,打开了一个本地的vue项目的一个页面,然后通过该页面的一个<a/>的点击事件,给reactnative传递<a/>的href地址,reactnative通过linking在浏览器中打开该href的页面。

问题就是:
在开发调试react-native run-android的环境,每次点击<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" href="https://github.com" class="icon-github"></a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Clock from './clock.vue';
    export default{
        name:'about',
        components:{
            Clock
        }
    }
</script>

有大牛知道是啥原因吗?

回答:

请问楼主有没有最后解决调这个问题?

回答:

楼主解决了吗? 注入JS太慢了

本文地址:H5W3 » 【Web前端问题】react native webview 打包后message通信很慢

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址