泉州网站建设咨询/深圳网站建设运营

泉州网站建设咨询,深圳网站建设运营,医院建筑工程网,职教mooc建设委员会网站序言 本教程希望让您快速熟悉使用React Native来编写iOS和Android App的技巧。如果你希望知道React Native是什么以及为什么Facebook打造了它,可以读读这篇博文 我们这里假设你已经有了使用React编写Web应用程序的经验。如果还没有,建议你可以先从React官…
序言

本教程希望让您快速熟悉使用React Native来编写iOS和Android App的技巧。如果你希望知道React Native是什么以及为什么Facebook打造了它,可以读读这篇博文

我们这里假设你已经有了使用React编写Web应用程序的经验。如果还没有,建议你可以先从React官网开始学习。

准备工作

React Native需要一些基础的配置工作,你可以参考开始使用React Native来进行。

在所有依赖的软件都已经安装完毕后,只需要输入两条命令就可以创建一个React Native工程。

  1. npm install -g react-native-cli

    react-native-cli是一个终端命令,它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做react-native的命令。这个安装过程你只需要进行一次。

  2. react-native init AwesomeProject

    这个命令会初始化一个工程、下载React Native的所有源代码和依赖包,最后在AwesomePrjoect/iOS/AwesomeProject.xcodeprojAwesomeProject/android/app下分别创建一个新的XCode工程和一个gradle工程。 

译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请先将npm仓库源替换为国内镜像: 

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

另,执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。
本站论坛区提供了完整的绿色纯净新项目包。完整打包全部iOS和Android的第三方依赖,只要环境配置正确,无需科学上网漫长等待,解压即可直接运行。

开发

想开发iOS版本,你现在可以在XCode中打开刚刚创建的工程(AwesomePrjoect/iOS/AwesomeProject.xcodeproj),然后只要按下?+R就可以构建并运行。这个操作会同时打开一个用于实现动态代码加载的Node服务(React Packager)。所以每当你修改代码,你只需要在模拟器中按下?+R,而无需重新在XCode中编译。

想开发Android版本,先连接你的设备或启动模拟器,然后在AwesomeProject目录下运行react-native run-android,就会构建工程并自动安装到你的模拟器或者设备,同时启动用于实现动态代码加载的Node服务。当你修改代码之后,你需要打开摇一摇菜单(摇一下设备,或者按下设备的Menu键,或者在模拟器上按下F2或Page Up,Genymotion按下?+M),然后在菜单中点击“Reload JS”。

在本向导中我们会创建一个简单的Movies应用,它可以获取25个上映中的电影,然后把他们在一个ListView中显示。

Hello World

react-native init命令会创建一个指定名字的应用,我们刚才输入的命令就创建了一个名为AwesomePrjoect的应用。这是一个简单的Hello World应用。对于iOS版本,你可以编辑index.ios.js来做一些改动,然后在模拟器中按?+R来看到修改的结果。对Android版本,你可以编辑index.android.js来做一些改动,然后在摇一摇菜单中点击“Reload JS”来看到修改的结果。

模拟数据

译注:本文的示例代码改用了ES6语法,可能和其他文档写法不一致。但React Native从0.18之后,新建项目默认已经采用了ES6语法,故我们推荐不熟悉ES6与ES5区别的朋友先读读这篇文章,另外还可以看看阮一峰老师的书。

在我们真正从Rotten Tomatoes(译注:一个国外的电影社区)抓取数据之前,我们先制造一些模拟数据来练一练手。在Facebook我们通常在JS文件的开头,紧跟着import语句之后声明一个常量,不过这不重要,你可以把它放在index.ios.jsindex.android.js的任意位置:

var MOCKED_MOVIES_DATA = [{title: '标题', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

展现一个电影

我们接下来要展现一个电影,绘制它的标题、年份、以及缩略图(译注:这个过程我们通常会叫做“渲染/render”,后面我们都会用“渲染”这个词)。渲染缩略图需要用到Image组件,所以把Image添加到对React的import列表中。

import React, {AppRegistry,Component,Image,StyleSheet,Text,View,
} from 'react-native';

然后修改一下render函数,这样我们可以把上面创建的模拟数据渲染出来。

  render() {var movie = MOCKED_MOVIES_DATA[0];return (<View style={styles.container}><Text>{movie.title}</Text><Text>{movie.year}</Text><Image source={{uri: movie.posters.thumbnail}} /></View>);}

按下?+R或者Reload JS,现在你应该能看到文字"Title"和"2015",但现在Image组件没渲染任何东西,这是因为我们还没有为图片指定我们想要渲染的宽和高。这通过样式来实现。当我们修改样式的时候,我们也应该清理掉我们不再使用的样式。

var styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},thumbnail: {width: 53,height: 81,},
});

然后把它应用到Image组件上:

        <Imagesource={{uri: movie.posters.thumbnail}}style={styles.thumbnail}/>

按下?+R或者Reload JS,现在图片应该可以被渲染出来了。

  

添加样式

现在我们已经成功的把我们的数据渲染出来了,下面让我们把它弄的更好看一些。我想把文字放在图片的右边,然后把标题弄的大一些,并且水平居中:

+---------------------------------+
|+-------++----------------------+|
||       ||        标题          ||
|| 图片  ||                      ||
||       ||        年份          ||
|+-------++----------------------+|
+---------------------------------+

所以我们需要增加一个container来实现一个水平布局内嵌套一个垂直布局。

      return (<View style={styles.container}><Imagesource={{uri: movie.posters.thumbnail}}style={styles.thumbnail}/><View style={styles.rightContainer}><Text style={styles.title}>{movie.title}</Text><Text style={styles.year}>{movie.year}</Text></View></View>);

和之前相比并没有太多变化,我们增加了一个container来包装文字,然后把它移到了Image的后面(因为他们最终在图片的右边)。然后我们来看看样式要怎么改:

  container: {flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},

我们用Flexbox来布局。如果你想了解更多,可以读读这篇文章。

在上面的代码片段中,我们用了一句flexDirection: 'row'来让我们的主容器的成员从左到右横向布局,而非默认的从上到下纵向布局。

现在我们往style对象里增加另一个样式:

  rightContainer: {flex: 1,},

这句话的作用是让rightContainer在父容器中占据Image之外剩下的全部空间。如果你还不是很理解的话,你可以往rightContainer里增加一个backgroundColor看一看,然后再去掉flex:1对比一下。你会发现去掉这一句后,容器会变成能容纳它孩子的最小大小。

给文字添加样式就简单的多了:

  title: {fontSize: 20,marginBottom: 8,textAlign: 'center',},year: {textAlign: 'center',},

再按一次?+R或者Reload JS来看看最新的结果。

  

拉取真正的数据

从Rotten Tomatoes的API拉取数据和学习React Native并没有什么直接关系,所以你也可以直接跳过本节。

把下面的常量放到文件的最开头(通常在require下面)来创建我们请求数据所需的地址常量REQUEST_URL

/*** 为了避免骚扰,我们用了一个样例数据来替代Rotten Tomatoes的API* 请求,这个样例数据放在React Native的Github库中。*/
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

首先在应用中创建一个初始的null状态,这样可以通过this.state.movies == null来判断我们的数据是不是已经被抓取到了。我们在服务器响应返回的时候执行this.setState({movies: moviesData})来改变这个状态。把下面这段代码放到我们的React类的render函数之前:

  constructor(props) {super(props);   //这一句不能省略,照抄即可this.state = {movies: null,  //这里放你自己定义的state变量及初始值};}

组件加载完毕之后,就可以向服务器请求数据。componentDidMount是React组件的一个生命周期方法,它会在组件刚加载完成的时候调用一次,以后不再会被调用。React中的各种生命周期方法请参阅此文档。

  componentDidMount() {this.fetchData();}

现在我们来为组件添加fetchData函数。你所需要做的就是在Promise调用链结束后执行this.setState({movies:data})。在React的工作机制下,setState实际上会触发一次重新渲染的流程,此时render函数被触发,发现this.state.movies不再是null。注意我们在Promise调用链的最后调用了done() —— 这样可以抛出异常而不是简单忽略。

  fetchData() {fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {this.setState({movies: responseData.movies,});}).done();}

现在我们来修改render函数。在电影数据加载完毕之前,先渲染一个“加载中”的视图;而如果电影数据已经加载完毕了,则渲染第一个电影数据。

  render() {if (!this.state.movies) {return this.renderLoadingView();}var movie = this.state.movies[0];return this.renderMovie(movie);}renderLoadingView() {return (<View style={styles.container}><Text>正在加载电影数据……</Text></View>);}renderMovie(movie) {return (<View style={styles.container}><Imagesource={{uri: movie.posters.thumbnail}}style={styles.thumbnail}/><View style={styles.rightContainer}><Text style={styles.title}>{movie.title}</Text><Text style={styles.year}>{movie.year}</Text></View></View>);}

现在再按一次?+R或者Reload JS,你会首先看到“正在加载电影数据……”,然后在响应数据到达之后,看到第一个电影的信息。

  

ListView

现在我们来让我们的应用能够渲染所有的数据而不是仅仅第一部电影。我们要用到的就是ListView组件。

为什么建议把内容放到ListView里?比起直接渲染出所有的元素,或是放到一个ScrollView里有什么优势?这是因为尽管React很高效,渲染一个可能很大的元素列表还是会很慢。ListView会安排视图的渲染,只显示当前在屏幕上的那些元素。而那些已经渲染好了但移动到了屏幕之外的元素,则会从原生视图结构中移除(以提高性能)。

首先要做的事情:在文件最开头,从React中引入ListView

import React, {AppRegistry,Component,Image,ListView,StyleSheet,Text,View,
} from 'react-native';

现在来修改render函数。当我们已经有了数据之后,渲染一个包含多个电影信息的ListView,而不仅仅是单个的电影。

  render() {if (!this.state.loaded) {return this.renderLoadingView();}return (<ListViewdataSource={this.state.dataSource}renderRow={this.renderMovie}style={styles.listView}/>);}

dataSource接口用来在ListView的整个更新过程中判断哪些数据行发生了变化。

你会注意到我们现在用到了this.state中的dataSource。下一步就是在constructor生成的初始状态中添加一个空白的dataSource。另外,我们现在要把数据存储在dataSource中了,所以不再另外用this.state.movies来保存数据。我们可以在state里用一个布尔型的属性(this.state.loaded)来判断数据加载是否已经完成了。

  constructor(props) {super(props);this.state = {dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2,}),loaded: false,};}

同时我们也要修改fetchData方法来把数据更新到dataSource里:

  fetchData() {fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {this.setState({dataSource: this.state.dataSource.cloneWithRows(responseData.movies),loaded: true,});}).done();}

最后,我们再在styles对象里给ListView添加一些样式。

  listView: {paddingTop: 20,backgroundColor: '#F5FCFF',},

现在可以体现最终的结果了:

  

为了实现一个完整功能的应用,接下来其实还有一些工作要做,譬如:添加导航器,搜索,加载更多,等等等等。可以在Movies示例中看看我们做了什么。

最终的代码

/*** Sample React Native App* https://github.com/facebook/react-native*/import React, {AppRegistry,Component,Image,ListView,StyleSheet,Text,View,
} from 'react-native';var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
var REQUEST_URL = API_URL + PARAMS;class AwesomeProject extends Component {constructor(props) {super(props);this.state = {dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2,}),loaded: false,};}componentDidMount() {this.fetchData();}fetchData() {fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {this.setState({dataSource: this.state.dataSource.cloneWithRows(responseData.movies),loaded: true,});}).done();}render() {if (!this.state.loaded) {return this.renderLoadingView();}return (<ListViewdataSource={this.state.dataSource}renderRow={this.renderMovie}style={styles.listView}/>);}renderLoadingView() {return (<View style={styles.container}><Text>Loading movies...</Text></View>);}renderMovie(movie) {return (<View style={styles.container}><Imagesource={{uri: movie.posters.thumbnail}}style={styles.thumbnail}/><View style={styles.rightContainer}><Text style={styles.title}>{movie.title}</Text><Text style={styles.year}>{movie.year}</Text></View></View>);}
};var styles = StyleSheet.create({container: {flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},rightContainer: {flex: 1,},title: {fontSize: 20,marginBottom: 8,textAlign: 'center',},year: {textAlign: 'center',},thumbnail: {width: 53,height: 81,},listView: {paddingTop: 20,backgroundColor: '#F5FCFF',},
});AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

本文转自React Native中文网:http://reactnative.cn/docs/0.20/tutorial.html#content

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/500030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器启动报错:One or more listeners failed to start. Full details will be found in the ...

idea本地启动web项目时 报错如下: One or more listeners failed to start. Full details will be found in the appropriate container log file 我的解决方案: 增加一步,配置artifacts 具体如下: 这个地方选择自己本地的web项目文件夹 都配置完然后Apply下,这个都配置好…

React Native使用指南-使用链接库

并不是所有的APP都需要使用全部的原生功能&#xff0c;包含支持全部特性的代码会增大应用的体积。但我们仍然希望能让你简单地根据自己的需求添加需要的特性。 在这种思想下&#xff0c;我们把许多特性都发布成为互不相关的静态库。 大部分的库只需要拖进两个文件就可以使用了&…

React Native使用指南-植入原生应用

由于React并没有假设你其余部分的技术栈——它通常只作为MVC模型中的V存在——它也很容易嵌入到一个并非由React Native开发的应用当中。实际上&#xff0c;它可以和常见的许多工具结合&#xff0c;譬如CocoaPods。 需求 CocoaPods – gem install cocoapodsNode.js 安装 nvm&a…

RPC协议与Web Service

一、引入 我们每天都在使用浏览器来上网冲浪, 在查找自己需要的资源, HTTP协议自然是我们使用的最多的 一种, 我们尽情地享受着这种信息高速路的快感,却没有试图去了解我们是如何获得这些资源的? 它是一种什么样的设计理念? 我们也偶尔会使用 Gtalk来和自己的同事或者朋友来聊…

RestFull架构

1 什么是REST REST全称是Representational State Transfer&#xff0c;中文意思是表述性状态转移。 它首次出现在2000年Roy Fielding的博士论文中&#xff0c;Roy Fielding是 HTTP 规范的主要编写者之一。 他在论文中提到:“我这篇文章的写作目的&#xff0c;就是想在符合架构原…

controller中执行main方法报错NoClassDefFoundError: javax/servlet/http/HttpServletResponse

controller中执行main方法报了这个错:NoClassDefFoundError: javax/servlet/http/HttpServletResponse,如下图: NoClassDefFoundError: javax/servlet/http/HttpServletResponse NoClassDefFoundError: javax/servlet/http/HttpServletRequest同理 原因是本地没有引入servlet…

初探Backbone

Backbone简介 中文API&#xff1a;http://www.css88.com/doc/backbone/ 英文API&#xff1a;http://backbonejs.org/ Backbone是构建javascript应用程序的一个优秀的类库。他简洁、轻量级、功能实在。 backbone采用MVC模式&#xff0c;本身提供了模型、控制器和视图从而我们应用…

订单量的监控

要解决的问题 : 1.在电商项目中,如何准确的知道当前订单量是正常的 2.如何在订单量突变后快速感知 解决思路 : 实现一个关于订单量的监控系统,将历史数据与实时数据做对比,因为每天的订单量,基本都是一个相似的变化范围,比如凌晨4点的单量是一天中最少的,节假日的单量要小于工…

基于abtest思想的流量切换(nginx lua redis)

使用前提: 项目重构了,旧项目还在线上运行,新项目准备替换线上的旧项目 最终目标: 要实现实时切换新旧项目,保证如果新项目上线后有问题,可以立刻快速的将流量切回旧项目 方案: 关于abtest的基本原理本文不再多说,本文重点是实践&#xff0c;先看图 如上图所示,用户访问的…

JavaScript内部实现

前言 JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象&#xff1b; DOM 描述了处理网页内容的方法和接口&#xff1b; BOM 描述了与浏览器进行交互的方法和接口。 ECMAScript、DOM 和 BOM 尽管 ECMAScript 是一个重要的标准&#xff0c;但它并不是 JavaScript 唯一…

流式计算storm核心组件介绍以及入门案例---跟着就能在本地跑起来的storm项目

关于storm的基础,参照我这篇文章:流式计算storm 关于并发和并行,参照我这篇文章:并发和并行 关于storm的并行度解释,参照我这篇文章:storm的并行度解释 关于storm的流分组策略,参照我这篇文章:storm的流分组策略 关于storm的消息可靠机制,参照我这篇文章:storm的消息可靠机制 …

nginx使用gzip压缩文件---lz77算法---Haffman编码

为了提高页面的响应速度,可以从设置 nginx 的 gzip 和缓存这2方面入手,而为ttf,js,css等文件开启 gzip 和缓存能大大减少带宽的消耗. HTTP 的内容编码机制 Accept-Encoding 和 Content-Encoding 是 HTTP 中用来对[采用何种编码格式传输正文]进行协定的一对头部字段. 它的工作…

Javascript模块化编程

随着网站逐渐变成"互联网应用程序"&#xff0c;嵌入网页的Javascript代码越来越庞大&#xff0c;越来越复杂。 网页越来越像桌面程序&#xff0c;需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法&#xff0c;管理网页的业务逻辑。…

zookeeper基础整理

zookeeper简述 ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;是Hadoop和Hbase的重要组件 ZooKeeper 使用 Java 所编写&#xff0c;但是支持 Java 和 C 两种编程语言。 提供的功能包括&#xf…

JS模块化编程require.js简介

一、为什么要用require.js&#xff1f; 最早的时候&#xff0c;所有Javascript代码都写在一个文件里面&#xff0c;只要加载这一个文件就够了。后来&#xff0c;代码越来越多&#xff0c;一个文件不够了&#xff0c;必须分成多个文件&#xff0c;依次加载。下面的网页代码&…

CSS position属性

目前几乎所有主流的浏览器都支持position属性&#xff08;"inherit"除外&#xff0c;"inherit"不支持所有包括IE8和之前版本IE浏览器&#xff0c;IE9、IE10还没测试过&#xff09;&#xff0c;以下是w3school对position五个值的解释&#xff1a; 其中absol…

storm的并行度的解释--- ( 看完就能理解 )

关于storm的基础,参照我这篇文章:流式计算storm 关于并发和并行,参照我这篇文章:并发和并行 关于storm的并行度解释,参照我这篇文章:storm的并行度解释 关于storm的流分组策略,参照我这篇文章:storm的流分组策略 关于storm的消息可靠机制,参照我这篇文章:storm的消息可靠机…

JS--Console.log()详解

对于JavaScript程序的调试&#xff0c;相比于alert()&#xff0c;使用console.log()是一种更好的方式&#xff0c;原因在于&#xff1a;alert()函数会阻断JavaScript程序的执行&#xff0c;从而造成副作用&#xff1b;而console.log()仅在控制台中打印相关信息&#xff0c;因此…

订单单量监控v2

前段时间做了一个订单单量监控的项目,已经投入使用了,现在总结一下 前期的想法参考这篇文章 整体使用了storm实时计算框架和redis数据库,还有kafka消息队列 先上效果图,我们可以后期将数据展示出来,明显发现某天00点有单量突变的情况,明显是促销活动导致单量增加了 而后面的报…

iOS中的MVC设计模式

一、MVC概述模型&#xff0d;视图&#xff0d;控制器&#xff08;MVC&#xff09;是Xerox PARC在二十世纪八十年代为编程语言Smalltalk&#xff0d;80发明的一种软件设计模式&#xff0c;已被广泛使用。后来被推荐为Oracle旗下Sun公司Java EE平台的设计模式&#xff0c;并且受到…