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 ...
随机推荐
- S19格式
S-record格式文件是Freescale CodeWarrior编译器生成的后缀名为.S19的程序文件,是一段直接烧写进MCU的ASCII码,英文全称问Motorola format for EE ...
- C++实例 分解质因数
分解质因数: 每个合数都可以写成几个质数相乘的形式.其中每个质数都是这个合数的因数,叫做这个合数的分解质因数.分解质因数只针对合数. 分解质因数的算式叫短除法.求一个数分解质因数,要从最小的质数除起, ...
- Relatively Prime Powers CodeForces - 1036F (莫比乌斯函数容斥)
Relatively Prime Powers CodeForces - 1036F Consider some positive integer xx. Its prime factorizatio ...
- java8学习之Function与BiFunction函数式接口详解
Function接口: 上次中已经使用了Function的apply()方法,但是在这个接口中还存在三个具体实现的方法,如下: 下面来仔细的将剩下的方法学习一下: compose(): 首先来读一下该 ...
- Problem C Shopping 闭环贪心
#include <bits/stdc++.h> using namespace std; ; int fa[maxn]; int main(){ int n, m; scanf(&quo ...
- LeetCode01 - 两数之和(Java 实现)
LeetCode01 - 两数之和(Java 实现) 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/two-sum 题目描述 给定一个整数数组 ...
- 批量升级 CentOS bash
#! /usr/bin/env python #coding=utf-8 from fabric.api import * from fabric.state import * env.rol ...
- BZOJ 1420: Discrete Root (原根+BSGS)
题意 已知kkk, aaa, ppp. 求 xk≡a (mod p)x^k\equiv a\ (mod\ p)xk≡a (mod p) 的所有根. 根的范围[0,p−1][0,p-1][0,p−1]. ...
- C# 数据类型转化为byte数组
short数据与byte数组互转 public byte[] ShortToByte(short value) { return BitConverter.GetBytes(value); } pub ...
- Swagger2常用注解和使用方法
一 引入maven依赖 <!--整合Swagger2--> <dependency> <groupId>com.spring4all</groupId&g ...