首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

react原生webview在android 10+中不起作用

React原生WebView在Android 10+中不起作用的原因是由于Android 10引入了对隐私和安全的更严格限制。在Android 10中,WebView默认启用了沙箱模式,这意味着WebView无法访问本地文件系统或执行JavaScript代码。

为了解决这个问题,可以采取以下几种方法:

  1. 使用React Native的WebView组件:React Native提供了一个名为WebView的组件,它是基于原生WebView的封装,可以在Android 10+中正常工作。你可以使用React Native来开发应用,并使用WebView组件来加载网页内容。
  2. 使用WebView的新API:Android 10引入了新的WebView API,可以通过设置WebView的WebSettings来解决问题。具体来说,你可以通过以下代码禁用沙箱模式:
代码语言:txt
复制
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    webView.getSettings().setAllowFileAccess(true);
    webView.getSettings().setAllowContentAccess(true);
}

这样设置后,WebView将能够访问本地文件系统和执行JavaScript代码。

  1. 使用第三方WebView库:如果以上方法无法解决问题,你可以考虑使用第三方WebView库,如Crosswalk或GeckoView。这些库提供了更高级的WebView功能,并且可以在Android 10+中正常工作。

腾讯云相关产品和产品介绍链接地址:

腾讯移动开发平台是为企业提供的一站式移动端开发和运营平台,集成腾讯十余年的移动研发积累,提供X5内核、热修复等业界领先能力,支持微信生态。了解更多信息,请访问:腾讯移动开发平台

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 开发实现点击 WebView 的图片,调用原生控件放大展示

    今天我们就来学习一下,如何点击 WebView 的网页图片,调用原生控件进行放大展示。 其实实现这种交互非常简单,就是通过 JS 调用原生控件。...通过点击加上的 onClick 事件,通过 JS 调用原生控件,展示放大即可。 效果图 这是在线网址展示的效果图 ? 这是本地 html 文件展示出的效果图 ?...设置 WebView 这一步就是将我们写的 html 本地文件放入到 WebView 。.../文件名.html //mWebView.loadUrl("file:///android_asset/image.html");mWebView.loadUrl("http://www.toutiao.com...super.onPageFinished(view, url); //这段js函数的功能就是注册监听,遍历所有的img标签,并添加onClick函数,函数的功能是图片点击的时候调用本地

    2.4K50

    从Hybrid到React-Native: JS移动端的南征北战史

    从我们前端的角度看啊,是这样子滴~ :Android啊,有个叫做WebView的控件,这个控件的作用是可以在里面放一个网页然后运行它!...于是就这样,我们可以从JS间接调用原生Android代码,从此桥梁建立 例如,比如说我们下面定一个JSInterface的类,里面的showToast方法可以弹出一个原生的Toast Android原生代码...几种常见的hybrid通信方式 2)JSbridge 从我们前端的角度看啊,其实是这样子滴~:就是Android啊,有这么一个WebChromeClient的组件,它就是上面讲到的WebView控件的一个子类...UI线程:也成为主线程,负责本机的Android/iOS的UI呈现,android它负责android测量/布局/绘制 JS线程:执行JS/React代码,进行API调用,处理触摸事件等,...RN-web尽量做到不侵入RN代码,不影响RN代码的逻辑,争取能够基本不动RN项目代码的情况下,将其H5化,RN-web项目的基本逻辑还是RN,不是React RN-WEB的作用 实现IOS/Android

    3.3K10

    我们是如何将 Cordova 应用嵌入到 React Native

    完成了嵌入 WebView 后,重写插件等一系列工作后,便想记录一下这个过程遇到的坑。 平滑地演进 如我开头所说,在有足够人力和物力的情况下,最好的方式就是重写应用。...React Native 嵌入 Cordova WebView React Native 嵌入 Cordova WebView 并不是一件容易的事,对于我们而言,工作量大概是一两个月。...原先我们用 Cordova 调用摄像头时,界面超难定制,而使用 React Native 则便得很轻松 当我们 WebView 里,可以轻松地调用任何原生组件,体验上也不比原生应用差 因此,主要工作就变成了...生产环境时,Android 需要将路径放到 file:///android_asset/ 目录下: let source; 实际上,那一点也适用于 iOS, iOS 打包的时候,我们也需要将 WebView... Android 版里的 WebView 可以支持 allowUniversalAccessFromFileURLs。

    4.9K60

    【架构拾集】: Android 移动应用架构设计

    在这一个多月里,我工作一个采用插件化的原生 Android 应用项目上。随着新技术的引入,及编写原生 Android 代码的技能不断提升,我开始思索如何去解锁移动应用新架构。...现今的很多应用里,也是采用多种技术栈结合的架构,如淘宝的 Android 原生 + Weex + WebView,或者支付宝(不确定有没有 Weex)。...Growth 技术方案 原生部分 系统底层将采用原生的代码作为基础框架,而不再是 React Native 作为基础。...毕竟原生 Android 有些架构还是相当有意思的: ? React Native React Native 从代码上的变化比较大,架构设计上从代码上切分出几个不同的页面。...除了,可能从 React Native 的 WebView 迁移到原生部分的 WebView 之外。 持续集成设计 之前我们提到持续集成的时候,多数是指持续集成的实施。

    2K100

    基于React-Native0.55.4的语音识别项目全栈方案

    2.1 WebView 方案: 一个app单页面全屏放置一个WebView组件,然后加载https方式部署的web应用。 理由: 手机浏览器无法支持的情况下,只能寄希望于WebView。...支持API26(Android8.0)版本的虚拟机,功能均可实现。最终Can I Use对于getUserMedia( )方法支持度的统计信息的备注,发现已知问题中写明了: ?...简单地说就是这个方法Android webview,iOS和PWA 基本都用不了。建议以后开发可能用到一些不常用的API时完整地看一下相关信息。...测试结果: 遗憾地是这个项目一年前已经停止维护了,最后一版的官方脚手架工具也无法初始化新的工程,间接使用的方式分为两种,第一,下载crosswalk的包,手动android工程替换原生WebView...WebRTCAndroid WebView兼容性不好,IOS内置浏览器不支持。

    3.7K30

    Dore 混合应用框架 —— 基于 React Native 的混合应用迁移方案

    半年前的那篇《我们是如何将 Cordova 应用嵌入到 React Native ,我介绍了如何将 Cordova 嵌入 React Native 应用。...Dore 是一个使用 React Native 实现的 WebView 容器,可以让你在 WebView 调用 React Native 组件。...其设计初衷:用于迁移 Cordova 的 WebView 应用到 React Native 的 WebView。 ? 当然,仍然有更多的插件开发之中,为了训练一下我编写原生代码的能力。...(0.2);DoreClient.isTablet().then(function(data) {}); React Native 使用起来也比较简单, WebView 的 onMessage 调用...onMessage = evt => { Dore.handleMessage(evt, this.webView)}; 对应的,只需要注入相应的原生模块,就可以调用第三方的原生模块——前提是我们已经对接了

    1.7K50

    大前端开发的路由管理之三:Android

    我们通常认为Android开发的路由管理主要分为两部分,Android原生页面栈和混合开发页面栈。...native原生页面,使用最多的是四大组件之一的Activity和依托于其的Fragment。...1、原生之Activity的页面跳转与管理 1.1 从Activity启动模式入手         Android开发默认的情况下(Standard 标准启动模式),如果我们多次启动同一个Activity...3.1 Activity-H5(webview)         我们知道Android原生控件与WebView的混合开发,Activity通过布局内置WebView控件来加载目标H5;WebView...Android原生页面与RN之间的页面管理,主要分为三类:         ① 以Intent实现的原生跳转到RN,此时页面栈交由Activity任务栈管理;         ② 以路由Navigation

    3.3K11

    React-Native WebView,实现RN代码与Html的简单交互

    React-Native WebView API 属性介绍 webview 实现与RN代码简单交互 Android原生代码对ReactNative WebView控件进行初始设置 React-Native...WebView 首先结合React-Native 高版本与低版本(0.41.2 与 0.25.1)分析其RN源码(偏向于Android方向)及api WebView WebView 作为一个RN组件也是有其生命周期方法...Android原生实现为 @ReactProp(name = "messagingEnabled") public void setMessagingEnabled(WebView...也就是原生WebView的getId()返回值,也就是android布局文件里的id值,这里算是唯一标识吧应该。...Android原生代码对ReactNative WebView控件进行初始设置 翻开Android端桥接WebView的源码ReactWebViewManager,发现其有两个构造参数: public

    2.9K10

    H5 手机 App 开发入门:技术篇

    混合技术栈:页面本身就是网页,默认 WebView 显示。 跨平台技术栈:提供一个 WebView 的语法,编译的时候将其换成原生WebView。...三、原生技术栈 原生技术栈分成 iOS 和安卓两个平台。 简单说,iOS 的原生技术栈就是使用 Object-C 语言或 Swift 语言, Xcode 开发环境编程。...$ ionic serve 上面命令会自动打开浏览器窗口,访问本机的8100端口,浏览器显示网页效果。 如果一切正常,命令行窗口按 Ctrl+c,退出服务。...上面代码React Native 自身的WebView控件,编译时会分别转为 iOS 和安卓的原生 WebView 控件。 接下来,预览页面效果。...根据官方文档,WebView 的用法如下。 ? 上面代码,首先新建了一个 WebView 控件的实例,然后把这个实例放到布局上,跟原生 App 的语法很像。

    6.8K41

    React Native——一次学习,随处编写

    ◆ ◆ ◆ 一次学习,随处编写 iOS与Android这两个操作系统上实现统一的开发框架,一份代码支持两个操作系统历史已经证明是非常困难的。...服务器回应后,原生代码再将收到的回应的登录成功与否,以及其他一些需要UI展示的数据传递给React Native组件,React Native组件接收原生代码传来的数据,解析这些数据并执行UI界面更新...应用界面React Native开发的界面与原生代码开发的界面间切换 某些情况下,我们希望使用原生代码开发的界面,比如某个界面,原来的版本已经开发好了,或者希望已经用原生代码开发好的项目中加入一些用...但因为所有的渲染都由Web相关技术来完成,使用WebView无法得到真正原生的用户体验,并且WebView无法做到与原生代码双向通信、无缝衔接。...React Native不排斥WebView开发,并且为WebView提供了相应的组件,可以ReactNative实现部分界面通过WebView呈现。

    1.7K20

    Android环境下WebView拦截所有请求并替换URL示例详解

    需求背景 接到这样一个需求,需要在 WebView 的所有网络请求,在请求的url,加上一个xxx=1的标志位。...xxx=1 寻找解决方案 从 Android API 11 (3.0) 开始,WebView 开始WebViewClient内提供了这样一条 API ,如下: public WebResourceResponse...然后搜索了一下 Android 代码对他的引用,点我搜索。...欢迎指出代码的问题~~一起学习进步 注意: 注意保护 URL 的 Scheme,代码特地过滤了 http 和 https。...到此这篇关于Android环境下WebView拦截所有请求并替换URL示例详解的文章就介绍到这了,更多相关Android WebView拦截所有请求并替换URL内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持

    4K32

    5000字解析:前端五种跨平台技术

    WK Webview(iOS) 来加载 (以后若无特殊说明,本书将用 Webview 来统一指代 Android 和 iOS 的网页加载控件)。...目前混合开发框架的典型代表有 Cordova、 lonic 和微信小程序,值得一提的是,微信小程序目前是 Webview 渲染的。并非原生渲染,但将来有可能会采用原生渲染。...RN 的生态非常强大,它开发出来的,也是真正的原生应用,它的原理如下: React-native 文件编写的代码,会在内存中生成虚拟 DOM 对象(其实就是一个 JS 对象),然后再通过 javaScriptCore...它是比较传统的跨平台技术,类似小程序, webView 渲染,原理如下: 其实就是原生webView 去加载,执行 H5 代码,这样可以跨平台,而且可以随时更新发布内容。...这样不仅可以保证 Android 和 iOS 上 UI 的一致性,而且可以避免因对原生控。 件依赖而带来的限制及高昂的维护成本。

    1.2K40

    5000字解析:前端五种跨平台技术

    1.12 Hybrid技术简介 H5+原生混合开发 这类框架的主要原理是将APP需要动态变动的一部分内容通过H5来实现,通过原生的网页加载控件 Webview( Android)或 WK Webview...(iOS)来加载(以后若无特殊说明,本书将用 Webview来统一指代 Android和iOs的网页加载控件)。...目前混合开发框架的典型代表有 Cordova、 lonic和微信小程序,值得一提的是,微信小程序目前是 Webview渲染的。并非原生渲染,但将来有可能会采用原生渲染。...RN的生态非常强大,它开发出来的,也是真正的原生应用,它的原理如下: React-native文件编写的代码,会在内存中生成虚拟DOM对象(其实就是一个JS对象),然后再通过javaScriptCore...这样不仅可以保证 Android和iOS上UI的一致性,而且可以避免因对原生控 件依赖而带来的限制及高昂的维护成本。

    1.2K20

    浅谈Hybrid

    webview 的基础上,与原生客户端建立js bridge桥接,以达到 js 调用Native API和 Native 执行js方法的目的。...而 Render 负责 UI 线程对 dom 实现渲染。...和 react native 一样,weex 所有的标签也都不是真实控件,JS 代码中所生成的 dom,最终都是由 Native 端解析,再得到对应的 Native 控件渲染,如 Android 标签对应...混合开发,也就是半原生半 Web 的开发模式,由原生提供统一的 API 给 JS 调用,实际的主要逻辑有 Html 和 JS 来完成,最终是放在 webview 显示的,所以只需要写一套代码即可达到跨平台效果...本质其实是原生的 App ,使用 WebView 作为容器直接承载 Web 页面。因此,最核心的点就是 Native 端 与 H5 端 之间的双向通讯层,也就是我们常说的 JSBridge。 ?

    6.8K30

    如何在 React Native 实现类微信小程序平台:WebView 调用原生组件

    《我们是如何将 Cordova 应用嵌入到 React Native 》 一文,我们简单地介绍了『React Native 重写 Cordova 插件:复杂插件的调用』步骤: WebView 调用...RN 方法,并监听 React Native 返回的相应事件 React Native 接收到 WebView 的调用,调用原生代码,并监听原生代码返回的相应事件 原生代码执行 React Native...执行代码,并发出相应的广播 WebView 调用的地方,接收到广播,执行相应的方法 上面的 4 和 5 可以是: 4.React Native 接收到原生代码的值,并返回给原生代码 5.接收到相应的值...步骤2:React Native 接收到 WebView 的调用,调用原生代码,并监听原生代码返回的相应事件 WebView 的 onMessage 方法里,我们需要处理不同的 action: onMessage...Native 接收到原生代码的值,并返回给原生代码 在这个例子里,由于 WebView 以广播的方式解绑,因此可以直接返回值: DatePickerEvent.addListener('DATEPICKER_NATIVE_INVOKE

    3.6K100

    跨平台技术演进

    React 框架,JSX 源码通过 React 框架最终渲染到了浏览器的真实 DOM ,而在 React Native 框架,JSX 源码通过 React Native 框架编译后,与Native...优缺点分析 优点 垮平台开发:相比原生的ios 和 android app各自维护一套业务逻辑大同小异的代码,React Native 只需要同一套javascript 代码就可以运行于ios 和 android...渲染和布局更高效:React Native摆脱了WebView的交互和性能问题,同时可以直接套用网页开发的css布局机制。...脱了 autolayout 和 frame 布局繁琐的数学计算,更加直接简便。 缺点 动画性能差:React Native 动画效率和性能的支持还存在一些问题,性能上不如原生Api。...不能完全屏蔽原生平台:就目前的React Native 官方文档可以发现仍有部分组件和API都区分了Android 和 IOS 版本,即便是共享组件,也会有平台独享的函数。

    2.4K20
    领券