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

最新推荐文章于 2024-04-29 00:42:09 发布
最新推荐文章于 2024-04-29 00:42:09 发布
阅读量1.8k 收藏 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
    评论
专栏目录
android开发腾讯webview优化,WebView替换内核适配优化之腾讯X5
weixin_29894169的博客
05-26 2017
WebView替换内核适配优化之腾讯X5Android原生的webview在对H5的支持并不是很好。而且自从Android 4.4之后，默认的浏览器内核从WebKit转化为chromium，因此适配什么的会遇到很多瓶颈。目前可选用的内核又两种，一个是腾讯的X5，一个是crosswalk。这次采用X5，相比crosswalk，x5接入速度快且占有体积不大(crosswalk会导致安装包多20m左右)...
WebView替换内核适配优化之腾讯X5
qq_43203586的博客
08-09 3226
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 我
RNWebViewExample:React-native-webview
08-05
WebView — 在 React Native 应用程序中使用 WebView 进行导航和数据流 git clone https: //github.com/mukeshmandiwal/RNWebViewExample.git cd RNWebViewExample yarn install or npm install # for ios cd ios && pod install react - native run - ios # for android react - native run - android WebView 和自定义导航来处理 WebView 中的导航 如何将数据从 WebView 传递给 React Native 如何将数据从 React Native 传递到 WebView 更详细的解释
react-native-webview替代RN原生Core中Webview
weixin_33919950的博客
12-04 1699
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...
ReactNative进阶（十）：WebView 应用详解_react native webview
最新发布
2301_82243603的博客
04-29 805
项目里用到了react，为什么要选择react，react有哪些好处。有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢。react生命周期函数和react组件的生命周期。react和Vue的原理，区别，亮点，作用。react的组件是通过什么去判断是否刷新的。Redux中间件是什么东西，接受几个参数。React的jsx，函数式编程。react高阶组件知道吗？reactJs的组件交流。react的生命周期函数。发送的数据,可以通过。获取发送过来的数据。怎么获取真正的dom。选择react的原因。
在react-native中使用crosswalk webview内核来增强安卓webview体验流畅性
weixin_42689686的博客
11-05 1424
在react-native中使用crosswalk webview内核来增强安卓webview体验流畅性 最近使用react-native开发安卓app,由于我们要在webview中运行白鹭引擎开发的游戏，这样就对webview性能有了要求，安卓手机内置的webview性能普遍很差，运行起来很卡，这样我就开始探索使用crosswalk内核，在github搜索到了一个https://github.c...
React Native react-native-webview 跨平台WebView库
BradyCC的博客
08-04 4622
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 6803
什么是WebView、WebView发展过程、WebView DevTools怎么用？如何调试WebView？
基于X5内核的WebView安卓HybridApp开发
Fu
08-17 7334
前言 现在的HybridApp也就是混合开发的APP越来越普遍了，其原理就是在一个APP中嵌入一个webview,然后访问我们的html5页面，而html5页面这部分内容，在我们APP不升级的情况下能动态的更新，并且具有跨平台性，也就是说Android和IOS都可以用这一个html页面，从而减小了开发成本。现在很多APP都是混合开发的了，比如淘宝，京东，还有很多银行的APP，中国移动APP等。
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...
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-...
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
详解react-native WebView 返回处理(非回调方法可解决)
08-27
主要介绍了详解react-native WebView 返回处理(非回调方法可解决)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
rn-webview-rpc:向 React Native WebView 组件添加 RPC 功能
08-05
RN-WebView-RPC 的目标是允许从运行在WebView组件内的 Web 应用程序调用原生 API，反之亦然。 它可以用作混合应用程序的本机部件和 Web 部件之间的桥梁，例如，从WebView请求本机地理位置权限。 RN-WebView-RPC 将...
React-Native学习笔记之：WebView控件使用
true100的专栏
03-30 5458
和Android及IOS一样，在React Native中也有加载网页数据的控件WebView,常用的方法有：source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 在WebView中载入一段静态的html代码或是一个url（还可以附带
安卓 简单集成腾讯X5 浏览器
Tomtwo的博客
04-24 980
安卓 集成 X5浏览器 替代 webkit
React Native调用系统浏览器
weixin_30588729的博客
07-31 432
import { Linking} from 'react-native'; //使用系统浏览器访问指定URLexport const contactBaidu = () => { var baiduURL = 'http://www.baidu.com/' Linking.canOpenURL(baiduURL).then(supported => { ...
react-native webview
08-24
React Native的WebView是一个用于在应用程序中显示Web内容的组件。它是通过使用第三方库react-native-web-webview来实现的。您可以使用npm命令来安装这个库，例如： ``` $ npm install react-native-web-webview --save ``` 通过引入这个库，您可以在您的React Native应用程序中使用WebView组件来加载和显示Web页面。您可以使用属性如onLoad、onError、onMessage等来监听WebView的加载、错误和消息事件。例如，您可以通过onLoad来设置页面加载完成后的回调函数，通过onError来设置错误处理函数，通过onMessage来处理从Web页面发送的消息。您可以使用style属性来设置WebView的样式，source属性来指定要加载的Web页面的来源。 以下是一个示例代码，展示了如何使用WebView组件： ```jsx <WebView ref={(view) => (this.webView = view)} useWebKit={false} onLoad={() => { let data = { name: userInfo.usrName }; this.webView.postMessage(JSON.stringify(data)); }} onError={(event) => { console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`); }} onMessage={(event) => { this._onH5Message(event); }} automaticallyAdjustContentInsets={false} contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }} onScroll={(event) => this._onScroll(event)} style={styles.webview} source={this.html ? { html: this.html } : { uri: this.url }} bounces={false} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} /> ``` 请注意，这只是一个示例，您可以根据您的实际需求来调整和配置WebView组件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [react-native-web-webview:React Native用于RN的WebView的Web实现](https://download.csdn.net/download/weixin_42165490/18797652)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [ReactNative进阶（十）：WebView 应用详解](https://blog.csdn.net/sunhuaqiang1/article/details/116158130)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值