Android webview 调用 react js 问题

Android 端

private void initWebView(){
    webView.addJavascriptInterface(this, "bridge");

    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    // 这一行必须写
    settings.setDomStorageEnabled(true);//开启DOM
}


  /**
     * 这个是js调用java的方法
     */
    @JavascriptInterface
    public void loadSuccess() {
        Log.i("loadsuccess", "location");
        loadComplete = true;
    }        

            // java 调用js
            JSONObject object = new JSONObject();
                    try {
                        object.put("x", x);
                        object.put("y", y);
                        object.put("floorId", floorId);
                        object.put("direction", -direction);
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                    final String location = object.toString();
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            // 这个必须加
                            if (loadComplete) {
                                webView.loadUrl("javascript:" + "" + "getLocation" + "(" + location + ")");
                            }
                        }
                    });













react 端

import React from 'react';
import styles from './index.less'

// 可以调用了
window.getLocation = function(obj){
  if(!!window.callback){
    window.callback.getLocation(obj)
  }
}
// React 类的实例暴露给window 就可以了。
window.setCallback = function(callback){
  window.callback = callback
}
class Index extends React.Component {

  constructor(props) {
    super(props);
  }

  componentWillMount() {
    window.setCallback(this);
  }

  componentDidMount() {
    /**
     * 初始化参数,默认使用在线数据,从蜂鸟视图数据服务器加载模型数据
     * https://www.fengmap.com/docs/js/v2.5.0/fengmap.FMMap.html
     **/
    var mapOptions = {
      //必要,地图容器
      container: document.getElementById('fengMap'),
      //必要,地图应用名称,通过蜂鸟云后台创建
      appName: '蜂鸟研发SDK_2_0',
      //必要,地图应用密钥,通过蜂鸟云后台获取
      key: '57c7f309aca507497d028a9c00207cf8'
    };

    //初始化地图对象
    this.map = new window.fengmap.FMMap(mapOptions);

    //打开Fengmap服务器的地图数据和主题
    this.map.openMapById('cxdsf14', function (error) {
      //打印错误信息
      console.log("ddd");
    });

    //地图加载完成事件
    this.map.on('loadComplete', function () {
      try{
        console.log('地图加载完成=====')
        window.bridge.loadSuccess();
      }catch (e) {

      }

    });

    this.map.on('mapClickNode',function(e){
      console.log(e,'diaji ');
    })
  }



  getLocation(obj){
    var x = obj.x;
    var y = obj.y;
    var floorId = obj.floorId;
    var direction = obj.direction;

    console.log(x);
    console.log(y);
    console.log(floorId);
    console.log(direction);
  }
  render() {
     return (
       <div  className={styles.container} id='fengMap'>

       </div>
     )

  }
}

export default Index;

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值