WebView Bridge

最新推荐文章于 2024-05-15 10:57:33 发布

April_zk

最新推荐文章于 2024-05-15 10:57:33 发布

阅读量183

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_45747074/article/details/131002124

版权

1.场景

在进行web加壳后，想要内嵌的web页通过点击web页中的扫码按钮从而调取手机相机硬件

2.解决方案

我所能做到的是React Native壳子中可以正常唤起相机硬件，但是对于一个 webview 组件来说，组件中貌似只能存在一个 webview 组件，那该如何进行操作硬件呢？
然后通过询问架构师
- “webview 调取手机硬件前端做不到的，XXX是自己写了 SDK，这个就是一种 webview 的 bridge 的技术”
概述 | 微信开放文档
可能是RN也是有相关的API，我以为他是像第三方库一样的存在，结果我就在RN的webview组件的配置项中找到了他。

WebView · React Native 中文网

3.这里是一个简单的demo

简单的来说就是：

RN向web进行传值则是通过 JavaScript
web向RN进行传值则是通过 onMessage

import React, { useState } from "react";
import WebView from "react-native-webview";
function DataScreen({ navigation, route }) {
  const html = `
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <input class="cwsuid-input-field" />
    <button id="btn">打开cam</button>
  </body>
  </html>
  `;

  const scriptbase = `document.getElementById('btn').onclick = () => {
    let camflag = false;
    window.ReactNativeWebView.postMessage(camflag);
  }`;

  return (
    <WebView
      style={{ height: 300, width: "100%" }}
      source={{ html: html }}
      onMessage={(event) => {
        console.log(event.nativeEvent.data);
        if (event.nativeEvent.data === "false") {
          console.log("打开相机");
          navigation.navigate("Details");
        }
      }}
      injectedJavaScript={scriptbase}
    />
  );
}

export default DataScreen;

April_zk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebView Bridge

我所能做到的是React Native壳子中可以正常唤起相机硬件，但是对于一个 webview 组件来说，组件中貌似只能存在一个 webview 组件，那该如何进行操作硬件呢？可能是RN也是有相关的API，我以为他是像第三方库一样的存在，结果我就在RN的webview组件的配置项中找到了他。在进行web加壳后，想要内嵌的web页通过点击web页中的扫码按钮从而调取手机相机硬件。3.这里是一个简单的demo。
复制链接

扫一扫