react-native-webview支持type="file

React Native 中的webView组件在Android下不支持 input type="file",也就是点击之后没有反应，在Android原生的webView控件中也是需要自己写逻辑实现的，很显然 React Native没有帮我们添加这个功能，往往有时候会有需求需要在webView通过input type="file"上传文件，所以这个问题还是要解决的

在网上看了很多的解决方案，差不多就两种方案，一种是通过使用插件，另一种自己写插件，今天就记录一种比较简单有效的方法：

使用 react-native-webview-file-upload-android 插件

gitHub:https://github.com/Oblongmana/react-native-webview-file-upload-android

我的测试版本

"react-native": "0.59.8",
"react-native-webview-file-upload-android": "^1.1.2"

1、先安装

npm install react-native-webview-file-upload-android --save

2、配置RN项目中 android/app/build.gradle

dependencies {
     //...
+    compile project(':react-native-webview-file-upload-android')
 }

3、配置RN项目中 android/settings.gradle

rootProject.name = 'YourAppName'

-include ':app'
+include ':app', ':react-native-webview-file-upload-android'
+project(':react-native-webview-file-upload-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-file-upload-android/android')

4、更改RN项目中 android/app/src/main/com/AAA/MainApplication.java文件（AAA为你自己的包名）

 //...
+import com.oblongmana.webviewfileuploadandroid.AndroidWebViewPackage;

 //...

 public class MainApplication extends Application implements ReactApplication {
     //...
     @Override
     protected List<ReactPackage> getPackages() {
         return Arrays.<ReactPackage>asList(
             new MainReactPackage(),
+            new AndroidWebViewPackage()
         );
     }
     //...
 }

5、特别关键的一步，别忘了 link

react-native link

接下来就可以在界面上使用了

import React, { Component} from 'react';
import { WebView, View, Platform } from 'react-native';
import AndroidWebView from 'react-native-webview-file-upload-android';
//...
class MySuperSpecialWebView extends Component {
  render() {
    return (
      <View style={{flex:1}}>
        {Platform.select({
              android:  () => <AndroidWebView
                                source={{ uri: 'https://mobilehtml5.org/ts/?id=23' }}
                              />,
              ios:      () => <WebView
                                source={{ uri: 'https://mobilehtml5.org/ts/?id=23' }}
                              />
        })()}
      </View>
    );
  }
}

6、更改react-native-webview-file-upload-android/android/build.gradle配置信息

这里的编译环境配置太低，如果你的 build.gradle 较高，要将这里的版本信息改成你build.gradle 对应的版本，不然再最后打包编译生成apk的时候会编译不成功

android {
    compileSdkVersion 23  ->27
    buildToolsVersion "23.0.1" -> "27.0.3"

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 23 -> 26
        versionCode 3
        versionName "0.3.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
}

删除

dependencies {
    - compile "com.android.support:appcompat-v7:23.0.1" // 删除改行
    compile "com.facebook.react:react-native:+" 
}

如果你打开的界面中有 input type="file"的话，就可以选择照片或者文件了

完善：
你会发现弹出的弹框title是英文 choose file，如果你想显示中文，那就进入
node_modules/react-native-webview-file-upload-android/android目录下找到AndroidWebViewModule.java文件
把

final Intent chooserIntent = Intent.createChooser(openableFileIntent, "choose file");

改为

final Intent chooserIntent = Intent.createChooser(openableFileIntent, "选择文件");

是不是很简单