RN中webview的一些思考
刚开始只是对接一下RN,h5部分,嵌套在RN里的webview里需要隐藏一些原生的按钮,遇到很多沟通上的问题,本来没使用RN之前,也是嵌套在webview里,也没什么问题,突然RN嵌套就有问题了,对方一直督促h5改动,出于对RN的好奇,和对自己技术的自信,改就改吧,postmessage,这东西也很好,但RN很坑,注入js会有问题,有延迟,h5发送postmessage也有问题,得延迟发送,具体时间还判断不出来,虽然有issue说根据window下的postmessage进行判断,但也是没啥效果,经过很多次沟通,最终由我提出了一个解决方案,如下:
webview中有钩子,onload后执行隐藏功能,本身就是RN的功能,自己执行多方便,非要h5执行;
附上两个issure
https://github.com/facebook/react-native/issues/11594,解释了为什么要延迟
https://github.com/react-native-community/react-native-webview/issues/702 解释了,升级后的webview为什么postmessage不能直接用
import React from 'react';
import { WebView } from 'react-native'; export default class Brand extends React.Component<any, any> {
public hideActionBar(){
// 隐藏按钮的逻辑
}
public render(): React.ReactNode {
const { navigation } = this.props; const { state } = navigation; const { params } = state; return <WebView
ref={'webview'}
source={{ uri: params.url }}
onLoadEnd={this.hideActionBar}
/>;
}
}
RN中webview的一些思考的更多相关文章
- Android中webView和网页的交互
Android中webView和网页的交互 Android中webView跟网页的交互式通过JavaScript进行的.具体步骤: 1.创建JavaScript,在点击的时候调用JavaScript ...
- Android中WebView的JavaScript代码和本地代码交互的三种方式
一.Android中WebView的漏洞分析最近在开发过程中遇到一个问题,就是WebView使用的时候,还是需要解决之前系统(4.2之前)导致的一个漏洞,虽然现在这个系统版本用户很少了,但是也不能忽视 ...
- Android 中Webview 自适应屏幕
随笔 - 478 文章 - 3 评论 - 113 Android 中Webview 自适应屏幕 webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomCon ...
- 关于《Head First Python》一书中print_lol()函数的思考
关于<Head First Python>一书中print_lol()函数的思考 在<Head First Python>第一章中,讲述到Python处理复杂数据(以电影数据列 ...
- 安卓中webview读取html,同时嵌入Flex的SWF,交互
安卓中webview读取html,同时嵌入Flex的SWF,交互 安卓activity与html交互很简单,用javascript接口即可,网上一堆的例子,基本上没多大问题. 在html里面嵌入swf ...
- React Native(十五)——RN中的分享功能
终于,终于,可以总结自己使用RN时的分享功能了-- 为什么呢?且听我慢慢道来吧: 从刚开始接触React Native(2017年9月中旬)就着手于分享功能,直到自己参与公司的rn项目开发中,再到现在 ...
- ReactNative之从“拉皮条”来看RN中的Spring动画
上篇博客我们聊了RN中关于Timing的动画,详情请参见于<ReactNative之结合具体示例来看RN中的的Timing动画>本篇博客我们将从一个“拉皮条”的一个动画说起,然后来看一下R ...
- ReactNative之结合具体示例来看RN中的的Timing动画
今天继续更新RN相关的博客.上篇博客详细的聊了RN中关于Flex布局的相关东西,具体请参见<ReactNative之参照具体示例来看RN中的FlexBox布局>.本篇博客继续更新RN的动画 ...
- ReactNative之参照具体示例来看RN中的FlexBox布局
今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客.上篇博客<ReactNative之从HelloWorld中看环境搭建.组件封装.Props及State>中我们通过一个HelloW ...
随机推荐
- 第十章、hashlib模块和hmac模块
目录 第十章.hashlib模块和hmac模块 一.hashlib模块 二.hash模块 第十章.hashlib模块和hmac模块 一.hashlib模块 hash是一种算法,接收传入的内容,经过运算 ...
- 深入学习Mybatis框架(二)- 进阶
1.动态SQL 1.1 什么是动态SQL? 动态SQL就是通过传入的参数不一样,可以组成不同结构的SQL语句. 这种可以根据参数的条件而改变SQL结构的SQL语句,我们称为动态SQL语句.使用动态SQ ...
- 如何解决Win10电脑网速慢的问题?
很多Win10系统用户反映自己的电脑配置并不算低,却比有些旧电脑上网速度还要慢,不知道是什么原因. 其实,除了运营商网速的原因外,我们的电脑设置也会对网速有所影响.下面好系统U盘启动就来介绍一个Win ...
- Mysql(四)-1:单表查询
一 单表查询的语法 SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条数 二 关键 ...
- Spinner simpleAdapte适配器 下拉列表
public class MainActivity extends AppCompatActivity { private TextView text; private Spinner spinner ...
- 浅谈apidoc的使用
使用前提:服务器已经安装好apidoc了 1.项目根目录建立 apidoc.json ,文件基础信息如下 { "name": "项目名称", "ver ...
- css 模块化
什么是css模块化思想?(what) 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好 ...
- mysql 导入sqlserver数据库
#mysql 导入sqlserver数据库 EXEC master.dbo.sp_addlinkedserver @server = N'sjkxb00', @srvproduct=N'MySQL', ...
- Linux之top 监视系统任务的工具
top 监视系统任务的工具: 和ps 相比,top是动态监视系统任务的工具,top 输出的结果是连续的: top 命令用法及参数: top 调用方法: top 选择参数 参数: -b 以批量模式运 ...
- BSGS 扩展大步小步法解决离散对数问题 (BZOJ 3239: Discrete Logging// 2480: Spoj3105 Mod)
我先转为敬? orz% miskcoo 贴板子 BZOJ 3239: Discrete Logging//2480: Spoj3105 Mod(两道题输入不同,我这里只贴了3239的代码) CODE ...