react-native-webview-bridge, 使用Javascript桥对原生 web view进行响应

分享于 

7分钟阅读

GitHub

  繁體 雙語
React Native Webview with Javascript Bridge
  • 源代码名称:react-native-webview-bridge
  • 源代码网址:http://www.github.com/alinz/react-native-webview-bridge
  • react-native-webview-bridge源代码文档
  • react-native-webview-bridge源代码下载
  • Git URL:
    git://www.github.com/alinz/react-native-webview-bridge.git
    Git Clone代码到本地:
    git clone http://www.github.com/alinz/react-native-webview-bridge
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/alinz/react-native-webview-bridge
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    查找维护者( s )

    我一直在忙,我不能继续坚持这个 repo。 我想问一下,如果有人想帮助我在github和wince上授予一个权限,开始合并许多请求和处理问题。

    请将你的github和 npm id发送给我,以便我可以添加你。

    谢谢!

    请先看一下这个问题,先看看这个问题。

    本地 web view Javascript桥

    我一直在测试和阅读大量的方法来安全地在本地和web视图之间创建桥梁。 我很高兴地宣布等待已经结束,而且来自和 上面的react,桥是完全功能的。

    安装

    要使用这里扩展,你必须执行以下步骤:

    在你的本地项目中,运行 npm install react-native-webview-bridge --save

    iOS

    • 转到xcode选项卡的Project Navigator

    2.右键单击 `Libraries` 3。 选择`Add文件。` 选项

    4.导航到 `node_modules/react-native-webview-bridge/ios` 并添加 `react-native-webview-bridge。xcodeproj`文件夹

    在项目Navigator`选项卡上,单击项目的NAME 并选择目标的NAME,然后单击`Build阶段。

    6.使用Libraries`展开`Link二进制,然后单击`+`符号添加一个新的。 7.选择 `libreact-native-webviwe-bridge。a`并单击`Add`按钮。

    8.清除编译以确保项目可以编译和生成。

    Android

    • 将以下导入添加到应用程序的MainApplication.java (。MainActivity.java 如果 rn <0.29 )
    importcom.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
    • 添加以下代码以将包添加到 MainApplication.java`` ( mainactivity。java` ( 如果 rn <0.29 )。
    protectedList<ReactPackage> getPackages() {
     returnArrays.<ReactPackage>asList(
     newMainReactPackage(),
     newWebViewBridgePackage() //<- this );
     }
    • 将以下代码添加到 android/setting.gradle

    你可能有多个 3rd 方库,确保不创建多个包含。

    
    include ':app', ':react-native-webview-bridge'
    
    
    project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')
    
    
    
    
    • 编辑 android/app/build.gradle 并添加以下行 inside dependencies
    
    compile project(':react-native-webview-bridge')
    
    
    
    
    • 运行 react-native run-android 以查看所有内容是否都可以编译。

    用法

    只需使用你选择的方式导入 MODULE:

    ** CommonJS风格 **

    var WebViewBridge =require('react-native-webview-bridge');

    ** es6/ES2015样式 **

    importWebViewBridgefrom'react-native-webview-bridge';

    WebViewBridgeWebView的扩展。 它加载后将特殊脚本插入任何页面。 此外,它还增加了 1个新方法和 1新道具,从而扩展了 WebView的功能。

    sendToBridge ( 消息)

    消息必须在字符串中。 因为这是在本地和web视图之间来回发送数据的唯一方法。

    onBridgeMessage

    这是一个需要一个函数的道具。 它将在从 web view接收到消息后被调用。 接收的消息的类型也在字符串中。

    allowFileAccessFromFileURLs ( 仅适用于 Android )

    这是一个允许通过 file://的本地加载页面访问其他 file://资源的道具。 通过 WebView 在web视图中。 默认为 false 4.1和 上面的。

    allowUniversalAccessFromFileURLs ( 仅适用于 Android )

    这是一个允许通过 file://的本地加载页面来访问任何来源的资源的道具。 通过 WebView 在web视图中。 默认为 false 4.1和 上面的。

    桥脚本

    桥接脚本是注入到所有web视图中的特殊脚本。 它自动 register 一个名为 WebViewBridge的全局变量。 它有 2种可选方法实现,一种方法将消息发送到本地。

    发送( 消息)

    这里方法向本机发送消息。 消息必须是字符串类型或者 onError 方法将被调用。

    onmessage

    这里方法需要实现。 当消息从本地端到达时它将被调用。 消息的类型为字符串。

    onerror ( 仅限 iOS )

    这是错误报告方法。 如果发送消息时发生错误,将调用。 它在字符串类型中接收错误消息。

    注释

    一个特殊的桥接脚本将在页面进入不同的URL之后注入。 所以你不需要在需要注入的时候进行管理。

    你仍然可以将自己的javascript传递到 web view中。 但是,桥接脚本将首先注入,然后你的自定义脚本。

    简单示例

    这里示例可以在 examples 文件夹中找到。

    constinjectScript=` (function () { if (WebViewBridge) { WebViewBridge.onMessage = function (message) { if (message ==="hello from react-native") { WebViewBridge.send("got the message inside webview"); } }; WebViewBridge.send("hello from webview"); } }());`;var Sample2 =React.createClass({
     onBridgeMessage(message){
     const { webviewbridge } =this.refs;
     switch (message) {
     case"hello from webview":
     webviewbridge.sendToBridge("hello from react-native");
     break;
     case"got the message inside webview":
     console.log("we have got a message from webview! yeah");
     break;
     }
     },
     render() {
     return (
     <WebViewBridge
     ref="webviewbridge" onBridgeMessage={this.onBridgeMessage.bind(this)}
     injectedJavaScript={injectScript}
     source={{uri:"http://google.com"}}/> );
     }
    });

    WEB  JAVA  Javascript  react  NAT  Native  
    相关文章