刚开始只是对接一下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的一些思考的更多相关文章

  1. Android中webView和网页的交互

     Android中webView和网页的交互 Android中webView跟网页的交互式通过JavaScript进行的.具体步骤: 1.创建JavaScript,在点击的时候调用JavaScript ...

  2. Android中WebView的JavaScript代码和本地代码交互的三种方式

    一.Android中WebView的漏洞分析最近在开发过程中遇到一个问题,就是WebView使用的时候,还是需要解决之前系统(4.2之前)导致的一个漏洞,虽然现在这个系统版本用户很少了,但是也不能忽视 ...

  3. Android 中Webview 自适应屏幕

    随笔 - 478  文章 - 3  评论 - 113 Android 中Webview 自适应屏幕   webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomCon ...

  4. 关于《Head First Python》一书中print_lol()函数的思考

    关于<Head First Python>一书中print_lol()函数的思考 在<Head First Python>第一章中,讲述到Python处理复杂数据(以电影数据列 ...

  5. 安卓中webview读取html,同时嵌入Flex的SWF,交互

    安卓中webview读取html,同时嵌入Flex的SWF,交互 安卓activity与html交互很简单,用javascript接口即可,网上一堆的例子,基本上没多大问题. 在html里面嵌入swf ...

  6. React Native(十五)——RN中的分享功能

    终于,终于,可以总结自己使用RN时的分享功能了-- 为什么呢?且听我慢慢道来吧: 从刚开始接触React Native(2017年9月中旬)就着手于分享功能,直到自己参与公司的rn项目开发中,再到现在 ...

  7. ReactNative之从“拉皮条”来看RN中的Spring动画

    上篇博客我们聊了RN中关于Timing的动画,详情请参见于<ReactNative之结合具体示例来看RN中的的Timing动画>本篇博客我们将从一个“拉皮条”的一个动画说起,然后来看一下R ...

  8. ReactNative之结合具体示例来看RN中的的Timing动画

    今天继续更新RN相关的博客.上篇博客详细的聊了RN中关于Flex布局的相关东西,具体请参见<ReactNative之参照具体示例来看RN中的FlexBox布局>.本篇博客继续更新RN的动画 ...

  9. ReactNative之参照具体示例来看RN中的FlexBox布局

    今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客.上篇博客<ReactNative之从HelloWorld中看环境搭建.组件封装.Props及State>中我们通过一个HelloW ...

随机推荐

  1. 第五篇python进阶之深浅拷贝

    目录 第五篇python进阶之深浅拷贝 一.引言 1.1可变 和不可变 二.拷贝(只针对可变数据类型) 三.浅拷贝 四.深拷贝 第五篇python进阶之深浅拷贝 一.引言 1.1可变 和不可变 id不 ...

  2. 关于同一台服务器上两个PHP项目相互访问超时的问题

    当一台服务器部署多个PHP项目,各自运行时并无干扰, 即使都使用 9000端口来跑php 但是有一种情况,当其中一个项目需要调用另一个php项目的接口时,便会超时,这是因为php是单线程的同步的 也许 ...

  3. 第七章·Logstash深入-收集NGINX日志

    1.NGINX安装配置 源码安装nginx 因为资源问题,我们先将nginx安装在Logstash所在机器 #安装nginx依赖包 [root@elkstack03 ~]# yum install - ...

  4. linux学习笔记七

    #文件权限很重要,有些时候删除和新建文件没有权限根本操作不了,linux一切皆是文件,所以必须得了解下权限了. 文件的一般权限 简单的ls -ld 命令就能看到权限,dr-xr-x---补全应该是dr ...

  5. MySQL 安装与基本概念

    Mysql版本 第一条产品线:5.0.xx及升级到5.1.xx的产品系列,这条产品线继续完善与改进其用户体验和性能,同时增加新功能,这条路线可以说是MySQL早期产品的延续系列,这一系列的产品发布情况 ...

  6. 8.JVM技术_JVM参数列表

    1.JVM参数列表 通常情况下启动一个Java应用程序就会启动JVM的虚拟机,虚拟机在启动时可以通过java 指令传递参数给JVM. java -Xmx3550m -Xms3550m -Xmn2g - ...

  7. linux syslog支持 ubuntu

    linux  syslog支持 linux  syslog支持 linux  syslog支持 ??????? https://wenku.baidu.com/view/8cc6b50a0202074 ...

  8. C#学习之Timothy Liu

    原文出自 本文摘录了一些值得学习的地方. 1.对一个程序来说,静态指编辑期.编译期,动态指运行期. 静态时装在硬盘里,动态时装在内存里. 2.反射示例 通过反射获得类的属性和方法. static vo ...

  9. 项目管理工具!DevExpress Winforms Gantt控件 v19.2强势来袭

    DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.无论是Office风格的界面,还是分析处理大批量的业务数据,DevExpr ...

  10. centos7编译安装php7.3

    处理问题   解决php configure: error: Cannot find ldap libraries in /usr/lib.错误 cp -frp /usr/lib64/libldap* ...