上图说明
1.为什么Rn的android端webview不支持选择图片?
android原生的webview,本身就需要配置一个方法来配合上传图片,RN封装的webView没有配置这个方法
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
if (mUploadMessage != null)
{
mUploadMessage.onReceiveValue(null);
}
mUploadMessage = uploadMsg; showPopSelectPic();
}
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
if (mUploadMessage != null) {
mUploadMessage.onReceiveValue(null);
}
mUploadMessage = filePathCallback;
showPopSelectPic();
return true;
}
2.如何给RN的webview配置上这个方法?
在js代码中暂时没办法处理,那只好改原生的方法,原生的webview封装在react native 包里,没办法改,只好重新封装一个webview.
3.怎么重新封装一个Rn组件?
https://reactnative.cn/docs/0.45/native-component-android.html#content
首先把/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/webview中的ReactWebViewManager的复制到自己的src的java包目录里,然后根据自己的需求进行更改,比如现在的需求事添加选择图片的配置
1.新建一个ActivityResultInterface 接口回调
interface ActivityResultInterface {
void callback(int requestCode, int resultCode, Intent data);
}
2.PickerActivityEventListener onActivityResult回调和自定义回调链接
public class PickerActivityEventListener extends BaseActivityEventListener {
private ActivityResultInterface mCallback;
public PickerActivityEventListener(ReactApplicationContext reactContext, ActivityResultInterface callback) {
reactContext.addActivityEventListener(this); mCallback = callback;
}
// < RN 0.33.0
public void onActivityResult(int requestCode, int resultCode, Intent data) { mCallback.callback(requestCode, resultCode, data);
}
// >= RN 0.33.0 public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
mCallback.callback(requestCode, resultCode, data);
}
}
3.ReactWebViewManager 自定义添加配置
public class ReactWebViewManager extends SimpleViewManager<WebView> implements ActivityResultInterface { //一些初始化变量 private ReactApplicationContext reactApplicationContext; private ValueCallback mUploadMessage; private Uri imageUri; private static final int TAKE_PHOTO = 10001; private static final int CHOOSE_PHOTO = 10002; protected static final String REACT_CLASS = "RCTWebView2"; ...... //修改构造方法 public ReactWebViewManager(ReactApplicationContext reactApplicationContext) { this.reactApplicationContext = reactApplicationContext; new PickerActivityEventListener(reactApplicationContext, this); mWebViewConfig = new WebViewConfig() { public void configWebView(WebView webView) { } }; } ...... protected WebView createViewInstance(final ThemedReactContext reactContext) { ReactWebView webView = createReactWebViewInstance(reactContext); webView.setWebChromeClient(new WebChromeClient() { ...... // For Android 4.1 public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) { if (mUploadMessage != null) { mUploadMessage.onReceiveValue(null); } mUploadMessage = uploadMsg; showPopSelectPic(reactContext); } public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) { if (mUploadMessage != null) { mUploadMessage.onReceiveValue(null); } mUploadMessage = filePathCallback; showPopSelectPic(reactContext); return true; } }); ...... } private void showPopSelectPic(final ThemedReactContext Context) { String[] items = new String[]{"相机", "相册"}; AlertDialog.Builder builder = new AlertDialog.Builder(Context); builder.setTitle("提示") .setSingleChoiceItems(items, 0, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); if (which == 0) { //openCamera File outputImage = new File(Context.getExternalCacheDir(), "output_image.jpg"); try { if (outputImage.exists()) { outputImage.delete(); } outputImage.createNewFile(); } catch (IOException e) { e.printStackTrace(); } if (Build.VERSION.SDK_INT < 24) { imageUri = Uri.fromFile(outputImage); } else { imageUri = FileProvider.getUriForFile(Context, "com.rnpro.fileprovider", outputImage); } // 启动相机程序 if (ContextCompat.checkSelfPermission(Context, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) { //ActivityCompat.requestPermissions(Context, new String[]{Manifest.permission.CAMERA}, 2); } else { openCamera(); } } else if (which == 1) { //openAlbum if (ContextCompat.checkSelfPermission(Context, Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) { //ActivityCompat.requestPermissions(Context, new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE}, 1); } else { openAlbum(); } } } }) .setOnCancelListener(new DialogInterface.OnCancelListener() { @Override public void onCancel(DialogInterface dialog) { if (mUploadMessage != null) { mUploadMessage.onReceiveValue(null); mUploadMessage = null; } } }); builder.create().show(); } void openCamera() { Intent intent = new Intent("android.media.action.IMAGE_CAPTURE"); intent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri); Activity currentActivity = reactApplicationContext.getCurrentActivity(); currentActivity.startActivityForResult(intent, TAKE_PHOTO); } void openAlbum() { Intent intent = new Intent("android.intent.action.GET_CONTENT"); intent.setType("image/*"); Activity currentActivity = reactApplicationContext.getCurrentActivity(); currentActivity.startActivityForResult(intent, CHOOSE_PHOTO); // 打开相册 } @Override public void callback(int requestCode, int resultCode, Intent data) { switch (requestCode) { case TAKE_PHOTO: if (resultCode == RESULT_OK) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { mUploadMessage.onReceiveValue(new Uri[]{imageUri}); } else { mUploadMessage.onReceiveValue(imageUri); } mUploadMessage = null; } else { mUploadMessage.onReceiveValue(null); mUploadMessage = null; return; } break; case CHOOSE_PHOTO: if (resultCode == RESULT_OK) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { mUploadMessage.onReceiveValue(new Uri[]{data.getData()}); } else { mUploadMessage.onReceiveValue(data.getData()); } mUploadMessage = null; } else { mUploadMessage.onReceiveValue(null); mUploadMessage = null; return; } break; default: break; } } }
4.注意 需要注册FileProvider和设置xml path
//清单文件中注册 <provider
android:name="android.support.v4.content.FileProvider"
android:authorities="com.rnpro.fileprovider"
android:exported="false"
android:grantUriPermissions="true"> <meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths" /> </provider> //res资源文件中新建xml文件夹新建文件file_paths.xml <?xml version="1.0" encoding="utf-8"?> <paths xmlns:android="http://schemas.android.com/apk/res/android"> <external-path name="my_images" path="" /> </paths>
5.将写好的ReactWebViewManager写入到ReactPackage中,将ReactPackage写入Application中
public class WebViewReactPackage implements ReactPackage {
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
return Arrays.<ViewManager>asList( new ReactWebViewManager(reactApplicationContext)
);
}
@Override
public List<NativeModule> createNativeModules( ReactApplicationContext reactApplicationContext) {
return Collections.emptyList();
}
}
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new WebViewReactPackage()
);
}
};
}
6.在js文件中,把/node_modules/react-native/Libraries/Components/WebView中的webview.android.js,复制到自己的js文件夹中,做一定的修改
webview.ios.js
import { WebView } from 'react-native';
export default WebView;
webview.android.js
var RCT_WEBVIEW_REF = 'webview2';
......
class WebView2 extends React.Component {
......
var
RCTWebView = requireNativeComponent('RCTWebView2', WebView2, WebView2.extraNativeComponentConfig);
//RCTWebView2与ReactWebViewManager的REACT_CLASS对应
//WebView2与上面的WebView2对应
module.exports = WebView2;
资源下载地址
https://download.csdn.net/download/xiaozhuang__/10811136
原文:https://blog.csdn.net/caoyangyang123/article/details/79669374