深入浅出React Native 3: 从零开始写一个Hello World
这是深入浅出React Native的第三篇文章。
将index.ios.js中的代码全部删掉,为什么要删掉呢?因为我们准备从零开始写一个应用~学习技术最好的方式就是自己动手写,看别人的代码一百遍的效果也不如自己写一遍来的效果大~
我们要做的事情主要分成以下两步:
1. 创建组件
2. 将创建好的组件显示在app上
打开index.ios.js文件,输入
var HelloWorld = React.createClass({
render: function () {
return (
<View>
<Text>
Hello World
</Text>
</View>
)
}
});
查找React文档可以看到该createClass的描述
ReactClass createClass(object specification)
通过传入一个描述说明(specification)来创建一个组件类,创建的这个组件类必须实现render这个方法,并且render方法只能返回一个节点,当然该节点可以包含任意多的子节点。
像上面我们创建了一个HelloWorld的组件类,该类实现了render这个方法,该方法只返回<View>这个子节点,当然,在<View>这个节点下还包含了<Text>这个节点。
第一步就完成了,你看,就是这么简单~
下面我们开始第二步。
AppRegistry.registerComponent('AwesomeProject', function() {
return HelloWorld;
});
AppRegistry是运行React Native的应用程序的一个入口,一个应用程序的根组件必须通过调用AppRegistry.registerComponent方法将自己注册到应用中,这样原生系统才能正确加载并通过调用AppRegistry.runApplication来运行应用程序。
在我们的项目中,根组件就是我们的HelloWorld,至于第一个参数为什么是AwesomeProject,参看api可以看到
static registerComponent(appKey: string, getComponentFunc: ComponentProvider)
第一个参数指的是appKey,如果大家还记得的话,我们通过react native命令行生成的项目模板的名字就叫做Awesome~当然这个名字可以改的,至于怎么改,我们以后再说,现在先保持这个名字。
这两件事情做完以后,切换回模拟器,CMD+R刷新(注意,服务器要保持运行状态哦~如果服务器停掉的话,npm start命令,还记得吗~不记得的话请翻看之前的教程哦),咦,怎么神马都没有~当然,也可能界面上出现一大片红色的错误信息~~
打开xcode可以看到其中有一段这样的错误:
系统找不到我们使用的React变量,所以报错了~其实不仅仅React我们没有定义,AppRegistry, View, Text我们都没有定义~所以下面我们要讲React Native定义的这些变量引入~
在index.ios.js文件的最上面添加下述代码~
var React = require('react-native');
var AppRegistry = React.AppRegistry;
var View = React.View;
var Text = React.Text;
因为AppRegistry, View, Text是React的一个属性,所以引入方式与React不同~
打开模拟器,CMD+R刷新下,就可以看到hello world显示在界面上啦~只是......位置有点点尴尬。
为了让这个显示在中间,我们为其添加一些style~
第一步需要引入StyleSheet变量。在引入变量的最后添加下面的代码:
var StyleSheet = React.StyleSheet;
然后在AppRegistry.registerComponent方法的上面(其实位置无所谓,只需要在引入变量的下面就可以了,之所以写在registerComponent前面,只是为了代码看起来好看些~),添加
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
我们会在后续讲解StyleSheet,现在只需要知道,StyleSheet是一种样式的抽象,类似于CSS。在上述的style中,我们将container定义为水平、垂直居中。
修改HelloWorld组件,为其添加我们设置的样式。
var HelloWorld = React.createClass({
render: function () {
return (
<View style={styles.container}>
<Text>
Hello World
</Text>
</View>
)
}
});
大功告成~在模拟器上刷新,就可以看到Hello World这几个字显示在iphone的中间啦~
深入浅出React Native 3: 从零开始写一个Hello World的更多相关文章
- 深入浅出 React Native:使用 JavaScript 构建原生应用
深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...
- 深入浅出React Native 2: 我的第一个应用
这是深入浅出React Native教程的第二篇文章. 1. 环境配置 React Native环境配好之后,就可以开始创建我们的第一个App啦. 打开控制台,输入 react-native init ...
- 一起学习造轮子(三):从零开始写一个React-Redux
本文是一起学习造轮子系列的第三篇,本篇我们将从零开始写一个React-Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Re ...
- 从零开始写一个武侠冒险游戏-8-用GPU提升性能(3)
从零开始写一个武侠冒险游戏-8-用GPU提升性能(3) ----解决因绘制雷达图导致的帧速下降问题 作者:FreeBlues 修订记录 2016.06.23 初稿完成. 2016.08.07 增加对 ...
- 从零开始写一个武侠冒险游戏-7-用GPU提升性能(2)
从零开始写一个武侠冒险游戏-7-用GPU提升性能(2) ----把地图处理放在GPU上 作者:FreeBlues 修订记录 2016.06.21 初稿完成. 2016.08.06 增加对 XCode ...
- 从零开始写一个武侠冒险游戏-6-用GPU提升性能(1)
从零开始写一个武侠冒险游戏-6-用GPU提升性能(1) ----把帧动画的实现放在GPU上 作者:FreeBlues 修订记录 2016.06.19 初稿完成. 2016.08.05 增加对 XCod ...
- 从零开始写一个Tomcat(叁)--请求解析
挖坑挖了这么长时间也该继续填坑了,上文书讲到从零开始写一个Tomcat(贰)--建立动态服务器,讲了如何让服务器解析请求,分离servlet请求和静态资源请求,读取静态资源文件输出或是通过URLCla ...
- 一起学习造轮子(二):从零开始写一个Redux
本文是一起学习造轮子系列的第二篇,本篇我们将从零开始写一个小巧完整的Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Red ...
- 一起学习造轮子(一):从零开始写一个符合Promises/A+规范的promise
本文是一起学习造轮子系列的第一篇,本篇我们将从零开始写一个符合Promises/A+规范的promise,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Pr ...
随机推荐
- 前端编码风格规范之 JavaScript 规范
JavaScript 规范 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域.这 ...
- 深入探讨:标签(Tag)的各种设计方案
首先,标签(Tag)是什么? 我的理解:用来具体区分某一类内容的标识,和标签类似的一个概念是分类(Category),有一个示例可以很好的区分它们两个,比如人类分为:白种人.黄种人和黑种人(可以看作分 ...
- Cesium原理篇:3最长的一帧之地形(3:STK)
有了之前高度图的基础,再介绍STK的地形相对轻松一些.STK的地形是TIN三角网的,基于特征值,坦白说,相比STK而言,高度图属于淘汰技术,但高度图对数据的要求相对简单,而且支持实时构建网格,STK具 ...
- C#调用SQL中的存储过程中有output参数,存储过程执行过程中返回信息
C#调用SQL中的存储过程中有output参数,类型是字符型的时候一定要指定参数的长度.不然获取到的结果总是只有第一字符.本人就是由于这个原因,折腾了很久.在此记录一下,供大家以后参考! 例如: ...
- jQuery 插件为什么要return this.each()
jQuery.fn.test2= function(){ this.css("background","#ff0");//这里面的this为jquery对象,而 ...
- 6.Struts2简单类型数据的接受
简单类型数据的接收 在Action类中定义与请求参数同名的属性, 即,要定义该属性的set方法,便能够使struts2自动接收请求参数并赋予同名属性. 简单类型数据的接受举例: 新建工程项目,名称为: ...
- js基础篇——变量
a.变量类型 变量类型 构造函数 举例 类型检测typeof 字符串 function String() var t = "chua"; var m = new String(&q ...
- 内存中OLTP与内存不足
我已经写了好几次内存中OLTP的文章和”为什么我还不推荐内存中OLTP给用户”.今天我想进一步谈下内存中OLTP背后的内存需求,还有如果你内存不够的话会发生什么. 一切都与内存有关! 我们都知道很久之 ...
- sqlserver 通用分页存储过程(转)
USE [AAA_TYDC] GO /****** Object: StoredProcedure [dbo].[proc_DataPagination] Script Date: 11/20/201 ...
- 基于CkEditor实现.net在线开发之路(3)常用From表单控件介绍与说明
上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...