ReactNative系列之九WebViewBridge（ReactNative与html5之间的调用）

目前rn0.37+已经支持原生webview与h5交互，不使用组件可以，使用起来也很方便，请移步：http://blog.csdn.net/yeputi1015/article/details/70187748

如果用第三库请看：

1、 需求

使用ReactNative开发时，项目中有时候还需要使用h5，那么本文要解决的问题是h5与ReactNativ的互动。在h5中单击某个按钮，可以触发ReactNative的动作执行。我们通过react-native-webview-bridge来实现

2、 实现流程

    a)  在github上根据一般过程集成(react-native-webview-bridge)，主要包括(针对android)

          i.   npm installreact-native-webview-bridge –save , 更新本地项目依赖包

          ii.  在项目的MainApplication中使用（适用于高版本的RN,低版本在MainActivity中）注册package,  newWebViewBridgePackage()

          iii. 配置android/setting.gradle

include ':app',':react-native-webview-bridge'

project(':react-native-webview-bridge').projectDir= new File(rootProject.projectDir,'../node_modules/react-native-webview-bridge/android')

           iv.  配置androidapp/build.gradle ，在dependencies中添加

compile project(‘:react-native-webview-bridge)

     b)  在ReactNative中需要：

          

     c)  在h5中需要：

          

3、 效果图

单击按钮“提供”，执行ReactNative方法打印结果