React Native探索之环境搭建与Hello World

1.配置React Native

首先我们要先来安装一些软件,如下所示。

Chocolatey/Homebrew

Windows平台安装Chocolatey:

Chocolatey是一个Windows上的命令行包管理器,安装了Chocolatey就可以通过命令行来安装一些我们需要软件。我们打开cmd命令行程序使用如下命令即可。

Mac平台安装Homebrew:

在Mac上则需要安装Homebrew,它和Chocolatey的作用是一样的,在终端输入如下命令即可。

我的Mac系统版本是10.11.6,安装过程中会提示按下return键,这时按下return键会提示输入系统密码,输入密码后会显示安装成功。

Python 2

Windows平台安装Python 2:

安装完Chocolatey就可以在命令行程序使用Chocolatey来安装Python 2。

Mac系统中自带Python的执行环境,因此不需要安装Python 2。

当然我们也可以直接Python官网去下载安装,下载地址为https://www.python.org/downloads/。

这里我的Windows平台的Python版本为2.7.10。

Node.js

Windows平台安装Node.js:

Mac平台安装Node.js:

同样的也可以去Node.js官网去下载安装,地址为https://nodejs.org/en/。

这里我的Windows平台的Node.js版本为7.8.0。Windows平台关掉cmd命令提示符窗口,打开Node.js command prompt(Node.js命令提示符窗口),输入如下语句来设置npm镜像以加速后面的过程,Mac平台在终端输入即可:

Yarn、React Native的命令行工具(react-native-cli)

接下来安装Yarn和react-native-cli,Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。react-native-cli则用于执行React Native的创建、初始化、更新项目、运行打包服务(packager)等任务。在Windows或者Mac平台输入如下语句来安装它们。

安装完yarn后也要设置镜像源:

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创建并运行项目

接下来我们创建和运行项目,在Windows或者Mac平台的命令提示符窗口进入需要存储React Native项目的文件目录,输入如下语句来创建项目:

这时会在存储文件中生成名为firstProject的项目文件,我们用Android Studio加载firstProject文件中android文件。

接下来运行SDK的模拟器,这里我的模拟器为Android 6.0版本的Nexus6。最后输入如下命令来将React Native项目运行到模拟器中:

这时模拟器运行效果如下图所示。

这时我们可以通过连续两次按下键盘的R键来刷新界面来查看你的最新修改。通过摇动手机(真机)或者按下menu键(CTRL+M/⌘+M)来进入React Native的开发者选项。

关于模拟器这里建议使用Genymotion,它所占用的内存要远小于SDK自带的模拟器。

4.Hello World

这段代码是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"就显示在界面中。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180606G0B95I00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券