AndroidのWebViewのコールはJsのコードに反応します

    最近、同社のプロジェクトは、生産性アップのAndroid H5ページの読み込みスピードの組み合わせを必要とします。より人気のある書き込みを使用してフロントページには、リアクトの特殊な性質のために反応して、Androidで、従来を使用することは困難です

mWebView.evaluateJavascript（「XXX（）」）メソッドが反応オブジェクトを呼び出す方法を見つけます。少しコンパイルメカニズムを研究リアクト場合WebPACKの詰めJS JS、これは非常に長く、すぐに、以前に書き込まれたクラスやメソッドを呼び出すために私たちを導くことができない機能を、実行しているbundle.js生成。

ソリューション：

   ES6を書き込むために、クラスのインスタンスを反応させ、その上のウィンドウにさらされます。

mport React from 'react';
import {Tabs, Badge,ImagePicker} from "antd-mobile";
import './my.css'
import {Link} from 'react-router-dom';
import Height from '../height'
import $ from 'jquery';
import plus from '../../images/plus.png'
import VConsole from 'vconsole'

window.updateValue = function(url) {
    console.log(url);
    if(window.callback != undefined) {
        window.callback.updateValue(url);
    }
};

window.setCallback = function(callback) {
    window.callback = callback;
};

export default class MyFeedback extends React.Component {
    state = {
        files: [],
        multiple: false,
        value:"我们非常重视你的建议11"
    };

    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
            files,
        });
    };

    onSegChange = (e) => {
        const index = e.nativeEvent.selectedSegmentIndex;
        this.setState({
            multiple: index === 1,
        });
    };

    onAddImageClick() {
        console.log(navigator.userAgent);
        //window.location.assign("?action=uploadimg");
        if (window.andpicker != null) {
            window.andpicker.test("hello");
        }
    }

    componentWillMount() {
        document.title = "反馈";
        var vConsole = new VConsole();
        window.setCallback(this);
    }

    updateValue(val) {
        this.setState({
            files: this.state.files.concat({
                url: val,
                id: '311',
            }),
        });
    }

    render() {
        return (
            <div style={{minHeight: 'calc(100vh - 43.5px)', backgroundColor: '#fff'}}>
                <div>
                    <div style={{padding:'8px',background:'#ccc'}}>问题和建议</div>
                    <div style={{margin:'8px'}}><input style={{height:'200px',width:'-webkit-fill-available'}} value={this.state.value} /></div>
                    <div style={{padding:'8px',background:'#ccc'}}>上传图片</div>
                    <div>
                        <ImagePicker
                            files={this.state.files}
                            onChange={this.onChange}
                            onImageClick={(index, fs) => console.log(index, fs)}
                            onAddImageClick={this.onAddImageClick}
                            selectable={this.state.files.length < 7}
                            multiple={this.state.multiple}/>
                    </div>
                    <div style={{margin:'8px',background:"#f00",color:'#fff',height:'20px',textAlign:'center',padding:'10px'}}>提交</div>
                </div>
                <Height></Height>
            </div>
        )
    }
}

window.setCallback（この）;あなたは、Javaエンド（）でwindow.updateValueを呼び出すことができますので、焦点である;相互作用を達成し、JSを反応させます

Javaの側のコード：

package com.example.jerry.h5project;

import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import java.util.HashMap;
import java.util.Map;

public class FeedbackAct extends AppCompatActivity implements AndroidPickerJs.Callback{
    private static final String TAG = FeedbackAct.class.getSimpleName();
    private static final int CHOOSE_PICTURE = 1;

    private WebView mWebView;
    private AndroidPickerJs mJsInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_feedback);

        initViews();
    }

    private void initViews() {
        mJsInstance = new AndroidPickerJs();
        mJsInstance.setCallback(this);
        mWebView = findViewById(R.id.web_view);
        mWebView.setWebViewClient(mWebViewClient);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        webSettings.setSupportZoom(true);
        mWebView.addJavascriptInterface(mJsInstance,"andpicker");

        mWebView.loadUrl("http://10.0.0.24:3000/myfeedback");
    }

    @Override
    public void selectPic() {
        choosePictures();
    }

    private WebChromeClient mWebChromeClient = new WebChromeClient() {
        @Override
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
            return super.onShowFileChooser(webView, filePathCallback, fileChooserParams);
        }
    };

    private WebViewClient mWebViewClient = new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
           
            return super.shouldOverrideUrlLoading(view, request);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
        }

        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            Log.d(TAG,"error = " + error.toString());
            super.onReceivedError(view, request, error);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
        }

    };

    private void choosePictures() {
        Intent intent = new Intent(
                Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        startActivityForResult(intent, CHOOSE_PICTURE);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == CHOOSE_PICTURE && resultCode == RESULT_OK) {
            final Uri uri = data.getData();
            Log.d(TAG,"evaluate js script ... uri = " + uri);
            Bitmap bitmap = BitmapUtils.getBitmapFromUri(this, uri);
            final String base64str = "data:image/png;base64," + Base64Utils.bitmapToBase64(bitmap);
            Log.d(TAG,"base64 = " + base64str);
            //final String base64 = "https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg";
            mWebView.post(new Runnable() {
                @Override
                public void run() {
                    mWebView.evaluateJavascript("window.updateValue('"+base64str+"')", new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String value) {
                            //此处为 js 返回的结果
                        }
                    });
                }
            });
        }
    }
}