reactnative中将webview浏览器内核替换为腾讯X5并保留react-native-webview中各种API

最新推荐文章于 2024-04-29 00:42:09 发布
最新推荐文章于 2024-04-29 00:42:09 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： reactnative webview 文章标签： 前端 npm javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dopapap/article/details/112371241
版权

最近写一个项目要使用webview，因为是androidTV，版本在5.0，所以浏览器内核比较老旧，很多功能和样式显示有问题。于是替换使用腾讯X5内核解决了问题。整理成了插件react-native-webview-tencentx5。

react-native-webview-tencentx5

将安卓中webview浏览器内核替换为腾讯X5内核并保留react-native-webview中各种API。

可以优化Android版本低而使浏览器内核webveiw不正常显示，同时使用腾讯X5方便扩展。

总之，等于使用腾讯浏览器打开webview页面。

其中react-native-webview的API支持版本为v10.9.3，X5内核版本SDK为v4.3.0.67_43967。

Getting started

$ npm install react-native-webview-tencentx5 --save

or

$ yarn add react-native-

最低0.47元/天 解锁文章
Odes
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
WebView替换内核适配优化之腾讯X5
qq_43203586的博客
08-09 3378
WebView替换内核适配优化之腾讯X5 Android原生的webview在对H5的支持并不是很好。而且自从Android 4.4之后，默认的浏览器内核从WebKit转化为chromium，因此适配什么的会遇到很多瓶颈。 目前可选用的内核又两种，一个是腾讯的X5，一个是crosswalk。这次采用X5，相比crosswalk，x5接入速度快且占有体积不大（crosswalk会导致安装包多20m左右） 1. 接入 详情请见： https://x5.tencent.com/docs/access.html 我
在react-native中使用crosswalk webview内核来增强安卓webview体验流畅性
weixin_42689686的博客
11-05 1427
在react-native中使用crosswalk webview内核来增强安卓webview体验流畅性 最近使用react-native开发安卓app,由于我们要在webview中运行白鹭引擎开发的游戏，这样就对webview性能有了要求，安卓手机内置的webview性能普遍很差，运行起来很卡，这样我就开始探索使用crosswalk内核，在github搜索到了一个https://github.c...
ReactNative进阶（十）：WebView 应用详解_react native webview
最新发布
2301_82243603的博客
04-29 1260
项目里用到了react，为什么要选择react，react有哪些好处。有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢。react生命周期函数和react组件的生命周期。react和Vue的原理，区别，亮点，作用。react的组件是通过什么去判断是否刷新的。Redux中间件是什么东西，接受几个参数。React的jsx，函数式编程。react高阶组件知道吗？reactJs的组件交流。react的生命周期函数。发送的数据,可以通过。获取发送过来的数据。怎么获取真正的dom。选择react的原因。
react-native-webview替代RN原生Core中Webview
weixin_33919950的博客
12-04 1701
WarningPlease use thereact-native-community/react-native-webviewfork of this component instead. To reduce the surface area of React Native,<WebView/>is going to be removed from the React N...
React Native react-native-webview 跨平台WebView库
BradyCC的博客
08-04 4627
RN 项目 安装 react-native-webview 跨平台webview库 # 安装 react-native-webview yarn add yarn add react-native-webview // package.json { "name": "RNMyBaby", "version": "0.0.1", "private": true, "script...
react-native必备：WebView篇
wxp的博客
08-29 6874
什么是WebView、WebView发展过程、WebView DevTools怎么用？如何调试WebView？
react-native-web-webview:React Native用于RN的WebView的Web实现
05-17
react-native-web-webview React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中： resolve: { alias: { 'react-native': 'react-native-web...
RNWebViewExample:React-native-webview
08-05
native run - ios# for androidreact - native run - androidWebView 和自定义导航来处理 WebView 中的导航如何将数据从 WebView 传递给 React Native如何将数据从 React Native 传递到 WebView更详细的解释
react-native-autoheight-webview：React Native的自动高度Webview
02-05
react-native-autoheight-webview React Native的自动高度webview，甚至内联html的自动宽度。 版本控制 npm install react-native-autoheight-webview --save （rn> = 0.60，rnw> = 10.9.0） npm install react-...
详解react-native WebView 返回处理(非回调方法可解决)
08-27
主要介绍了详解react-native WebView 返回处理(非回调方法可解决)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-native-webview.zip
08-06
React Native WebView库就是对这个原生组件的封装，提供了更方便的API和生命周期管理，使开发者可以在React组件中直接嵌入网页。 React Native WebView的主要特性包括： 1. **双向通信**：通过`postMessage` API，...
webView替换成X5内核的DEMO
03-23
代码涉及到的内容有： 1.去掉activity标题栏 2.去掉activity信息栏 3.X5浏览器内核Demo（官方地址：https://x5.tencent.com/tbs/guide/sdkInit.html ） 4.webView的一些webSettings设置 5.禁止webView跳转到手机自带浏览器 6.返回键监听
解决RN 的 webview 组件不支持android客户端上传图片文件问题
03-23
解决RN 的 webview 组件不支持android客户端上传图片文件问题
react-native-webgl：不推荐使用：use expo-gl –为React-native实现WebGL
02-05
react-native-webgl：不推荐使用：use expo-gl –为React-native实现WebGL
基于X5内核的WebView安卓HybridApp开发
Fu
08-17 7387
前言 现在的HybridApp也就是混合开发的APP越来越普遍了，其原理就是在一个APP中嵌入一个webview,然后访问我们的html5页面，而html5页面这部分内容，在我们APP不升级的情况下能动态的更新，并且具有跨平台性，也就是说Android和IOS都可以用这一个html页面，从而减小了开发成本。现在很多APP都是混合开发的了，比如淘宝，京东，还有很多银行的APP，中国移动APP等。
React-Native学习笔记之：WebView控件使用
true100的专栏
03-30 5466
和Android及IOS一样，在React Native中也有加载网页数据的控件WebView,常用的方法有：source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 在WebView中载入一段静态的html代码或是一个url（还可以附带
android开发腾讯webview优化,WebView替换内核适配优化之腾讯X5
weixin_29894169的博客
05-26 2035
WebView替换内核适配优化之腾讯X5Android原生的webview在对H5的支持并不是很好。而且自从Android 4.4之后，默认的浏览器内核从WebKit转化为chromium，因此适配什么的会遇到很多瓶颈。目前可选用的内核又两种，一个是腾讯的X5，一个是crosswalk。这次采用X5，相比crosswalk，x5接入速度快且占有体积不大(crosswalk会导致安装包多20m左右)...
安卓 简单集成腾讯X5 浏览器
Tomtwo的博客
04-24 988
安卓 集成 X5浏览器 替代 webkit
React Native调用系统浏览器
weixin_30588729的博客
07-31 435
import { Linking} from 'react-native'; //使用系统浏览器访问指定URLexport const contactBaidu = () => { var baiduURL = 'http://www.baidu.com/' Linking.canOpenURL(baiduURL).then(supported => { ...
React-Native入门与实战：打造原生体验的跨平台应用
4. React-Native的开发与实践：在实际开发中，需要安装并配置好Node.js、iOS SDK、Android SDK以及相关的开发工具，例如使用模拟器或真机进行调试。Chrome上的React-Native工具对于开发者来说是必不可少的，它们帮助...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值