react-native-webview禁止缩放

一、需求

RN-webview禁止缩放，即固定屏幕大小，但同时要能够监听到其他手势识别

二、实现

仅仅设置webview的大小自适应是不够的，因为webview所引入的h5页面有可能是能够缩放的。

因此先向h5页面注入代码：

const INJECTEDJAVASCRIPT = `const meta = document.createElement('meta'); meta.setAttribute('content', 'initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta);
`

而后设置webview：

<WebViewref={ref => (this.webview = ref)}javaScriptEnabled={true}scalesPageToFit={false}injectedJavaScript={ INJECTEDJAVASCRIPT }source={{ uri: this.state.source }}
/>

即可固定页面。

转载于:https://www.cnblogs.com/bbcfive/p/10989367.html

react-native-webview禁止缩放相关推荐

rn webview加载本地静态html,React Native - Webview 加载本地文件
网上没找到合适的方法.用 react-native-fs 解决了一下,因为release之后静态文件地址发生改变,之前的引入就无效了 1.项目根目录引入静态文件的文件夹 2.创建一个html,刚才引入 ...
android 加载静态网页,React Native：如何在WebView内加载SPA或本地静态HTML页面？
React Native:如何在WebView内加载SPA或本地静态HTML页面? React Native WebView允许你使用uri属性加载可公开访问的资源,就像程序内的一个浏览器.但是,当你 ...
React Native Android 应用层实战沦陷记
[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景一眨眼又一年快要过去了,原计划今年的最后一个小目标(React N ...
react native与webview通信跳转页面报错：Cannot read property 'setNativeProps' of undefiend
这个错误是我这边用react native和webview通信的时候,因为要从webview跳回到react native的页面,所以就从webview传过来一个路由字符串.本来以为可以通过navig ...
react native利用webvView嵌入h5页面以及RN与webView的通信
前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信. 一.react native ...
【苹果家庭推iiMessage】React Native举行开发仍是iOS，用原生的代码实现类似webview的页面
推荐内容IMESSGAE相关作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息作者推荐内容 2.相册 ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
React Native 0.50版本新功能简介
React Native在2017年经历了众多版本的迭代,从本人接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能 ...
React Native开发总结（一）
一.RN优劣势 React Native的设计理念: 既拥有Native的用户体验.又保留React的开发效率优势: 它对比原生开发更为灵活,对比H5体验更为高效. 替代传统的WebView,打开效 ...
RN(React Native)
RN是React的原生组件库网址:React Native 中文网 · 使用React来编写原生应用的框架一.ReactNative开发环境的搭建在本机搭建RN项目开发运行环境 -- 3GB+ ...

react-native-webview禁止缩放

react-native-webview禁止缩放相关推荐

最新文章

热门文章