React Native入门(一)环境搭建与Hello World
前言
目前关于React Native的教程很多,官方文档写的也不错,但是感觉大部分教程写的不是很清楚,导致我各种碰壁。因此我来写一个简洁的教程。本篇文章基于React Native 0.43,只适用于用Windows平台的Android开发者。
1.配置React Native
首先我们要先来安装一些软件,如下所示。 Chocolatey Chocolatey是一个Windows上的命令行包管理器,安装了Chocolatey就可以通过命令行来安装一些我们需要软件。我们打开cmd命令行程序使用如下命令即可。在Mac上则需要安装Homebrew,和Chocolatey的作用是一样的。
powershell -NoProfile -ExecutionPolicy Bypass -Command
"iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"
&& SET PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin
Python 2 安装完Chocolatey就可以在cmd命令行程序使用如下Chocolatey安装Python 2。
choco install python2
当然我们也可以直接Python官网去下载安装,下载地址为https://www.python.org/downloads/。 这里我的Python版本为2.7.10。
Node.js 打开cmd命令提示符窗口,使用Chocolatey来安装NodeJS。
choco install nodejs.install
同样的也可以去Node.js官网去下载安装,地址为https://nodejs.org/en/。 这里我的Node.js版本为7.8.0。这时我们关掉cmd命令提示符窗口,打开Node.js command prompt(Node.js命令提示符窗口),输入如下语句来设置npm镜像以加速后面的过程:
npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global
Yarn、React Native的命令行工具(react-native-cli) 接下来安装Yarn和react-native-cli,Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。react-native-cli则用于执行React Native的创建、初始化、更新项目、运行打包服务(packager)等任务。在Node.js command prompt输入如下语句来安装它们。
npm install -g yarn react-native-cli
安装完yarn后也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --globalyarn config set disturl https://npm.taobao.org/dist --global
2.配置Android Studio
这里假设你是一个Android开发者并且已经安装了Android Studio,我们要确保SDK安装正确,打开Android Studio的SDK Manager,在SDK Platforms窗口中勾选Show Package Details,并确保已经安装了下图打勾的选项。
接下来在SDK Tools窗口中勾选Show Package Details,在Android SDK Build Tools列表中勾选23.0.1,勾选最底部的Android Support Repository。
3.使用React Native创建并运行项目
这时关闭所有的命令提示符窗口,打开Node.js command prompt,进入存储React Native项目路径下,比如我的是d:/rn,输入如下语句来创建React Native项目:
react-native init firstProject
这时会在d:/rn中生成名为firstProject的项目文件,我们用Android Studio加载firstProject文件中android文件。接下来运行SDK的模拟器,这里我的模拟器为Android 6.0版本的Nexus6。最后输入如下命令来将React Native项目运行到模拟器中:
cd firstProject
react-native run-android
这时模拟器运行效果如下图所示。
这时我们可以通过连续两次按下键盘的R键来刷新界面来查看你的最新修改。通过摇动手机或者按下menu键(CTRL+M)来进入React Native的开发者选项。 关于模拟器这里建议使用Genymotion,它所占用的内存要远小于SDK自带的模拟器。
4.Hello World
我们将index.android.js 文件的代码清空并加入如下代码。
这段代码是ES6编写的,ES6是JavaScript语言的下一代标准。不了解的同学可以买一本阮一峰的《ES 6标准入门》,电子书地址为http://es6.ruanyifeng.com/。 在注释1处做了两件事,一是为react组件指定默认的输出,并命名为React,二是从react组件中导入Component 变量。 注释2处定义了HelloWorldApp 组件并继承自Component ,接着在render方法中return了注释3处的内容,这是一种在JavaScript中嵌入XML结构的语法,叫做JSX,JSX编写的内容会显示在界面中。注释4处用AppRegistry模块来告知React Native哪一个组件被注册为整个应用的根容器。 接着我们连续两次按下键盘的R键来刷新界面,这样”Hello world”就显示在界面中。
- ASP.NET Web API中的依赖注入什么是依赖注入ASP.NET Web API依赖解析器使用Unity解析依赖配置依赖解析
- 解决Entity Framework查询匿名对象后的跨域访问的一种方式
- WebSocket在ASP.NET MVC4中的简单实现
- 在ASP.NET MVC中使用Unity进行依赖注入的三种方式第一种方法第二种方法第三种方法
- Unity Container中的几种注册方式与示例1.实例注册2.简单类型注册
- 使用Unity创建依赖注入依赖注入生命周期:注册、解析、销毁 注册解析销毁
- 使用WCF进行跨平台开发之三(JAVA调用WCF服务)1.开发必备2.生成WCF客户端3.开发程序4.结束语
- 使用WCF进行跨平台开发之二(IIS托管WCF服务并使用php平台调用)1.系统必备2.在IIS中托管WCF服务3.使用PHP调用托管在IIS中的WCF服务
- 使用WCF进行跨平台开发之一(WCF的实现、控制台托管与.net平台的调用)1.创建项目结构2.契约的设计3.实现服务4.控制台托管服务5.在.net平台中调用WCF
- 使用GUI工具高效构建你自己的Nuget包丰富包的基础信息添加要包含的文件The end
- 网页结构与表现原则
- CSS3动画功能
- Angular开发者手册重点翻译之指令(一)文本和属性绑定ngAttr属性绑定
- CSS3中的变形处理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法