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%\chocolatey\bin

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”就显示在界面中。

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2017-05-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

Windows环境搭建Red5流媒体服务器

Windows环境搭建Red5流媒体服务器指南 测试环境:Windows 7 一、   下载安装程序 red5-server 下载地址 https://gith...

1.1K60
来自专栏云计算教程系列

使用nano在Linux中编辑文件

GNU nano,简称nano,是大多数Linux发行版的基本内置编辑器。GNU nano是一个小巧友好的文本编辑器. 与基本的文本编辑相比,nano提供许多额...

12740
来自专栏阮一峰的网络日志

Node 调试工具入门教程

JavaScript 程序越来越复杂,调试工具的重要性日益凸显。客户端脚本有浏览器,Node 脚本怎么调试呢? ? 2016年,Node 决定将 Chrome ...

42560
来自专栏yang0range

React Native在Android当中实践(二)——搭建开发环境

React Native在Android当中实践(一)——背景介绍 React Native在Android当中实践(二)——搭建开发环境 React Na...

9640
来自专栏自由而无用的灵魂的碎碎念

将windows server 2016改造为像windows 10一样适合个人使用的系统

Windows server 2016 RTM已流出,具体可以搜索wzor大神泄露的,英文版本是0911的。现根据我安装后整理的如何配置使个人更适合使用。

31540
来自专栏运维

安装Ubuntu10.04TLS后可做的几件事

Ctrl+Alt+T 打开终端(或者Alt+F2打开运行应用程序),输入gconf-editor,打开配置编辑器。

19830
来自专栏林欣哲

搭建移动端的跨平台开发环境

适用范围 大部分情况下均可用React Native一套代码跑两个平台,比如信息展示和交互等等。 如果涉及到手机设备如摄像头、定位、地图等,则要么封装原生代码给...

36480
来自专栏九彩拼盘的叨叨叨

软件推荐

9210
来自专栏逸鹏说道

Win10 IIS本地部署MVC网站时不能运行?

网站部署之~Windows Server | 本地部署 一、服务器系: 1.初始Windows Server 2012 R2 Hyper-V + 系统安装详细 ...

40790
来自专栏晓晨的专栏

发布你的程序包到Nuget

12130

扫码关注云+社区

领取腾讯云代金券