react 写的页面自适应移动端页面高度自适应吗

来源：蜘蛛抓取(WebSpider) 时间：2017-10-14 09:34 标签： 移动端页面自适应
1671人阅读
ReactNative（1）
本项目是WebView&或&Web&组件，支持Android、iOS, 支持auto height高度自适应及在html页面和RN组件之间call js相互调用js方法，very useful & easily!
基于React-native原生的WebView组件纯js实现, 起名为react-native-webview2&或&WebView&或&Web.
react-native-webview2&当你设置了属性&source={uri:xxx}时可以动态改变WebView&的高度(目前还不支持source={html})，但若你设置了属性style={height:xxx}设置了高度就不能自适应了, 设置了高度后高度是固定的.react-native-webview2&也可以让你在html页面和reactnative之间相互调用js代码。要从rn组件调用html页面的js，你只需要在rn组件中调用this.web.evalJs(&js code...here&)&，若要调用react-native代码，你只需要在html页面中调用&returnEval(&rn code...here&)，同时你需要设置这个组件的属性evalReturn={(r) =& {eval(r)}.react-native-webview2支持所有其他原生React Native&WebView的属性.
WebView示例项目:&
WebView示例
WebView&使用方法
执行&npm install react-native-webview2 --save
import Web from 'react-native-webview2';
ref={(c) =& {this.web = c}}
evalReturn={(r) =& {eval(r)}
source={{uri: 'xxx'}}
style={[styles.web, {minHeight: 300}]}
...other props
完整示例代码:&
WebView&配置
新增的属性
evalJs: 从react-native调用html页面里的js的方法. 例如:&this.web.evalJs('var t = document. alert(t)');evalReturn: 若你需要从html页面调用react-native的方法，这个属性是需要的. 固定写法：evalReturn={(r) =& {eval(r)}.go: 打开一个新的url. 例如:&this.web.go('http://xxxxxx');
returnEval: 在html页面的一个function，从html页面调用react-native的方法时调用的js方法, 例如：returnEval('this.setText(&from html page...&)')
MIT License
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：6116次
排名：千里之外
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'系统展示如下
1、前端采用bootstrap3进行架构
2、后端采用asp.net mvc进行开发
开发工具vs2010 mvc4需要安装sp1的补丁。
3、js组件的封装采用react
1、新建mvc项目&BootStrapReactAndMVC。在Views\Shared\新建_Layout.cshtml文件。将bootstrap的引用进行添加。
2、新建HomeController和ReportController两个Controller对象。
3、新建renHangCPU.jsx文件。文件的内容如下
var CPUWatch = React.createClass({
render: function() {
return (&div&
&h2 className="sub-header"&CPU监控&/h2&
&div className="row placeholders"&
&div className="col-xs-6 col-sm-3 placeholder"&
&img data-src="holder.js/200x200/auto/sky" className="img-responsive" alt="Generic placeholder thumbnail"/&
&h4&CPU1&/h4&
&span class="text-muted"&使用率10%&/span&
&div className="col-xs-6 col-sm-3 placeholder"&
&img data-src="holder.js/200x200/auto/vine" className="img-responsive" alt="Generic placeholder thumbnail"/&
&h4&CPU2&/h4&
&span class="text-muted"&使用率10%&/span&
&div className="col-xs-6 col-sm-3 placeholder"&
&img data-src="holder.js/200x200/auto/sky" className="img-responsive" alt="Generic placeholder thumbnail"/&
&h4&CPU3&/h4&
&span class="text-muted"&使用率10%&/span&
&div className="col-xs-6 col-sm-3 placeholder"&
&img data-src="holder.js/200x200/auto/vine" className="img-responsive" alt="Generic placeholder thumbnail"/&
&h4&CPU4&/h4&
&span class="text-muted"&使用率20%&/span&
新建renhangyingyanjsx.jsx文件。文件的内容如下
var YingPanWatch = React.createClass({
render: function () {
return (&div&&h2 className="sub-header"&硬盘吞吐量&/h2&
&div className="table-responsive"&
&table className="table table-striped"&
&th&#&/th&
&th&磁盘1&/th&
&th&磁盘2&/th&
&th&磁盘3&/th&
&th&磁盘4&/th&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&1,001&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
&td&100&/td&
jsx不能被直接引用。我们要用ES的编译器进行编译。
&在这个网址上进行编译。
编译后的文件如下
renHangCPU1.js 可以直接引用
"use strict";
var CPUWatch = React.createClass({
displayName: "CPUWatch",
render: function render() {
return React.createElement(
React.createElement(
{ className: "sub-header" },
React.createElement(
{ className: "row placeholders" },
React.createElement(
{ className: "col-xs-6 col-sm-3 placeholder" },
React.createElement("img", { "data-src": "holder.js/200x200/auto/sky", className: "img-responsive", alt: "Generic placeholder thumbnail" }),
React.createElement(
React.createElement(
{ "class": "text-muted" },
"使用率10%"
React.createElement(
{ className: "col-xs-6 col-sm-3 placeholder" },
React.createElement("img", { "data-src": "holder.js/200x200/auto/vine", className: "img-responsive", alt: "Generic placeholder thumbnail" }),
React.createElement(
React.createElement(
{ "class": "text-muted" },
"使用率10%"
React.createElement(
{ className: "col-xs-6 col-sm-3 placeholder" },
React.createElement("img", { "data-src": "holder.js/200x200/auto/sky", className: "img-responsive", alt: "Generic placeholder thumbnail" }),
React.createElement(
React.createElement(
{ "class": "text-muted" },
"使用率10%"
React.createElement(
{ className: "col-xs-6 col-sm-3 placeholder" },
React.createElement("img", { "data-src": "holder.js/200x200/auto/vine", className: "img-responsive", alt: "Generic placeholder thumbnail" }),
React.createElement(
React.createElement(
{ "class": "text-muted" },
"使用率20%"
renhangyingpanjs.js 可以直接被引用
"use strict";
var YingPanWatch = React.createClass({
displayName: "YingPanWatch",
render: function render() {
return React.createElement(
React.createElement(
{ className: "sub-header" },
"硬盘吞吐量"
React.createElement(
{ className: "table-responsive" },
React.createElement(
{ className: "table table-striped" },
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
&4、然后在下面的view Home/Index上我们添加如下的代码
ViewBag.Title = "欢迎使用";
ViewBag.WhichPage="Home";
Layout = "~/Views/Shared/_Layout.cshtml";
@section Scripts {
&script type="text/babel"&
ReactDOM.render(
&CPUWatch/&,
document.getElementById('divCPU')
ReactDOM.render(
&YingPanWatch/&,
document.getElementById('divYingpan')
&div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" &
&div id="divCPU"&&/div&
&div id="divYingpan"&&/div&
&在Report的Index上添加如下代码
ViewBag.Title = "欢迎使用";
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.WhichPage="Report";
@section Scripts {
&script type="text/babel"&
ReactDOM.render(
&CPUWatch/&,
document.getElementById('divCPU')
ReactDOM.render(
&YingPanWatch/&,
document.getElementById('divYingpan')
&div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" &
&div id="divYingpan"&&/div&
&div id="divCPU"&&/div&
大功告成。&
阅读(...) 评论()为什么前端工程师多不愿意用 Bootstrap 框架？ - 知乎1134被浏览279386分享邀请回答933 条评论分享收藏感谢收起56添加评论分享收藏感谢收起查看更多回答4 个回答被折叠（）更好的工作机会
在100offer，提交一份个人资料，一周内即会有5-10家Top互联网公司主动向你发出邀请。100offer确保你的隐私万无一失，同时Consultant将为你全程提供专业服务。
最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
web在线直播课
潭州教育是中国较早的在线教育平台,教学内容涵盖网络营销,java,javascript,jquery,android,ios,mysql,围棋,刺绣,养殖,农业,手艺,网页设计,平面设计,影视后期,CAD建筑机械,网络营销,商战智慧,办公软件,三维设计,工业设计,淘宝摄影,英语,音乐,大学代理,Photoshop教程,
Max教程,Maya教程,CAD教程,会声会影教程,AI教程,淘宝开店,摄影教程,免费教程,素材下载等众多在线学习精品课程。经过10年的发展,潭州教育已经发展为中国规模较大的在线教育平台。
React 中文文档 (v15.6.1)
React-用于构建用户界面的 JAVASCRIPT 库
CSS3参考手册
CSS3参考手册 - 最新最全的CSS参考手册，CSS3属性集合，CSS3 Properties, CSS3, CSS3手册, CSS3参考手册
您的位置： » 分类:
» 文章: js实现的高度自适应
您可能感兴趣的文章
近期最热文章
- 2,985 - 2,247 - 2,157 - 2,055 - 991
关注WEB前端开发公众号16078人阅读
React Native（24）
转载请标明出处：本文出自:(一)前言&&&&&&&&&【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:&&&&&&&& & & & 今天我们一起来看一下WebView组件讲解以及使用实例& & & & &&刚创建的React Native技术交流3群(),React Native技术交流4群()，请不要重复加群！,欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!&&&&&&&&& 该WebView组件进行创建渲染一个原生的WebView，进行加载一个网页。(二)属性方法继承可以使用View组件的所有属性和Style(具体查看: 和)automaticallyAdjustContentInsets
bool&& 设置是否自动调整内容contentInset&
{top:number,left:number,bottom:number,right:number}& 设置内容所占的尺寸大小html& string& WebView加载的HTML文本字符串injectJavaScript& string 当网页加载之前进行注入一段js代码onError function& 方法 当网页加载失败的时候调用onLoad& function 方法& 当网页加载结束的时候调用onLoadEnd fucntion 当网页加载结束调用，不管是成功还是失败onLoadStart& function&
当网页开始加载的时候调用onNavigationStateChange
function方法& 当导航状态发生变化的时候调用renderError& function&
该方法用于渲染一个View视图用来显示错误信息renderLoagin
function& 该方法用于渲染一个View视图用来显示一个加载进度指示器startInLoadingState& bool &url& string&
设置加载的网页地址allowsInlineMediaPlayback& bool&&
该适合iOS平台，设置决定当使用HTML5播放视频的时候在当前页面位置还是使用原生的全屏播放器播放，默认值false。【注意】.为了让视频在原网页位置进行播放，不光要设置该属性为true，还必须要设置HTML页面中video节点的包含webkit-playsinline属性bounces bool& 该适合iOS平台 设置是否有界面反弹特性domStorageEnabled
bool& 该适合Android平台 该只适合于Android平台，用于控制是否开启DOM Storage（存储）javaScriptEnabled& bool&
该适合于Android平台，是否开启javascript，在iOS中的WebView是默认开启的onShouldStartLoadWithRequest& function&
该适合iOS平台，该允许拦截WebView加载的URL地址，进行自定义处理。该方法通过返回true或者falase来决定是否继续加载该拦截到请求scalesPageToFit& bool&
该适合iOS平台& 用于设置网页是否缩放自适应到整个屏幕视图以及用户是否可以改变缩放页面scrollEnabled& bool&&&
该适合iOS平台 用于设置是否开启页面滚动(三)实战实例&&&&&& 上面我已经对于WebView组件的基本介绍以及相关属性方法做了讲解，下面我们用几个实例来演示一下WebView组件的使用。&&&&&& 3.1.先演示一个WebView组件最基本的使用方法，直接加载一个网页，具体代码如下:'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
} from'react-native';
var DEFAULT_URL = 'http://www.lcode.org';
var WebViewDemo =React.createClass({
render: function() {
&View style={{flex:1}}&
&Textstyle={{height:40}}&简单的网页显示&/Text&
&WebViewstyle={styles.webview_style}
url={DEFAULT_URL}
startInLoadingState={true}
domStorageEnabled={true}
javaScriptEnabled={true}
&/WebView&
var styles =StyleSheet.create({
webview_style:{
backgroundColor:'#00ff00',
AppRegistry.registerComponent('WebViewDemo',() =& WebViewDemo);运行效果截图如下:&& 3.2.WebView加载本地的HTML静态字符串，具体代码如下:'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
} from'react-native';
var DEFAULT_URL = 'http://www.lcode.org';
const HTML = `
&!DOCTYPEhtml&\n
&title&HTML字符串&/title&
&metahttp-equiv=&content-type& content=&text/charset=utf-8&&
&meta name=&viewport&content=&width=320, user-scalable=no&&
&style type=&text/css&&
margin: 0;
padding: 0;
font: 62.5% arial, sans-
background: #
padding: 45
margin: 0;
text-align:
color: #33f;
&h1&加载静态的HTML文本信息&/h1&
var WebViewDemo =React.createClass({
render: function() {
&View style={{flex:1}}&
&WebViewstyle={styles.webview_style}
html={HTML}
startInLoadingState={true}
domStorageEnabled={true}
javaScriptEnabled={true}
&/WebView&
var styles =StyleSheet.create({
webview_style:{
backgroundColor:'#00ff00',
AppRegistry.registerComponent('WebViewDemo',() =& WebViewDemo);&运行效果截图如下:(四)最后总结&&&&&&&&& 今天我们主要学习一下WebView组件的基本介绍和实例演示使用，具体还有更加详细的使用方法会在后面进阶中继续更新的。大家有问题可以加一下群React Native技术交流群()或者底下进行回复一下。& & & &尊重原创，转载请注明：From Sky丶清（） 侵权必究！& & & &关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)& & &关注我的微博，可以获得更多精彩内容& & &&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1140455次
积分：13115
积分：13115
排名：第1080名
原创：215篇
评论：594条
姓名:江清清本科:北方民族大学个人站点:
文章：24篇
阅读：283409
文章：38篇
阅读：237347
文章：11篇
阅读：23712
阅读：30480
文章：14篇
阅读：26395
文章：13篇
阅读：48958
文章：24篇
阅读：68683
(1)(1)(8)(16)(5)(19)(16)(2)(3)(6)(14)(1)(1)(10)(27)(5)(1)(6)(2)(2)(4)(1)(5)(9)(9)(11)(18)(6)(12)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'

我要回帖

更多关于 移动端页面自适应 的文章

 

随机推荐