React Native学习(一) 环境的搭建

前言

年后新的项目需要用到混合开发,这里一边学习一边记录学习的过程,主要使用目前最新的RN版本,借鉴React Native中文网来熟悉它的完整过程。

搭建开发环境(目标平台Android 开发平台WindowS)

(一)安装Chocolatey

Chocolatey ['tʃɒklɪti,'tʃɒkləti] 是一个Windows上统一包管理软件,使你可以在命令行下安装软件,便于开发者按需快速安装应用程序和工具,不用去各个网站找工具,不过国内访问和下载速度相对慢一点。

  • 一般通过如下命令的方式安装

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

安装过程中需要注意以下两点

1,需要通过管理员权限启动CMD命令行

管理员身份运行CMD.png

2,配置Chocolatey的安装目录,默认是安装在C:\ProgramData\chocolatey,我们需要在环境变量里配置其安装路径,然后再执行其安装命令。

Chocolatey配置环境变量.png
  • 执行我们的安装命令:
    安装过程如下:
Chocolatey安装命令.png

最后在我们设置的F:\chocolatey目录下可以看到它的安装内容。

(二)安装Python2

安装之前说一下,我们的工具都是通过Chocolatey的操作命令来安装,Chocolatey详细的操作命令可以到Chocolatey官网的Commands命令标签下去找,里面有所有的操作符和实例。

  • 打开命令提示符窗口,使用Chocolatey来安装Python 2 ['paɪθɑn]
choco install python2
choco install python2 -y -o -ia "'/qn /norestart ALLUSERS=1 TARGETDIR=F:\Python2'" 
  • 安装成功后如下
Python2下载.png
  • 同时也可以到Python2官网,自己去下载最新版本,然后安装到自己想要的目录,Chocolatey命令方式是从Chocolatey的软件仓库里去下载,下载的内容是一样,只是方式不同而已。
(三)安装NodeJS
  • 打开命令提示符窗口,使用Chocolatey来安装NodeJS,也可以到Node.JS官网去下载,没选择安装版本时默认是安装最新版本。安装成功后通过node -v命令查看版本。
choco install nodejs.install
  • nodejs自定义目录的安装方法,用官网方法都失败,也没找到解决办法,目前就装在默认C盘里了。

  • 安装完node后设置npm镜像以加速后面的过程。

npm在nodejs安装目录C:\Program Files\nodejs\node_modules\npm下可以看到,
这里我们需要在环境变量里配置npm

1,配置环境变量,这里只需要配置NodeJS的路径就行,npm的路径不需要再加入,都加入后续操作会报错。

nodejs配置环境变量.png

2,通过将%NODE_PATH%加入path中完成配置过程。

3,在命令窗口中执行以下命令,完成镜像设置。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
(四)安装Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
  • 1,命令行安装yarn
npm install -g yarn react-native-cli

安装成功后,根据安装过程中的提示,找到默认的安装目录,把其配入环境变量,如下将C:\Users\PVer\AppData\Roaming\npm加入环境变量path目录下即可。

react-native操作命令目录.png
  • 2,安装完yarn后同理也要设置镜像源,在输入命令之前,同样需要把yarn配入环境变量,同上,我们在安装yarn时会有显示默认的安装目录,我们找到其bin目录加入到path即可。
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

我们在配置好yarn的环境变量后执行命令如下:

yarn操作命令.png
  • 3,安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名。
(五)安装Android Studio

AS的安装这里就省略,这是每个安卓开发人员必备的,下面来说说需要注意的几个地方。

  • React Native目前需要Android Studio2.0或更高版本。
  • Android Studio需要Java Development Kit [JDK] 1.8(暂不支持更高版本)。
  • Android studio的Settings->Android SDK中设置SDK-Platforms和SDK-Tools

1,配置SDK-Platforms,选择Show Package Details,勾选Android 6.0下的如下6项。

SDK-Platforms设置.png

2,在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须包含有这个版本。当然如果其他插件需要其他版本,你可以同时安装其他多个版本)。然后还要勾选最底部的Android Support Repository.

SDK-Tools设置.png
  • 配置ANDROID_HOME环境变量,SDK的安装目录
ANDROID_HOME环境变量.png
  • 将Android SDK的Tools目录添加到PATH变量中
platform-tools配置.png
(六)安装Git
  • 你可以使用Chocolatey来安装git,git的话是安卓开发基本必备的,这里安装就不多提了。
choco install git
(七)创建一个新的RN项目

原有项目嵌入RN模块,我会在学习完RN之后加进来,这里就只讨论创建一个新的RN项目。

  • 1,在我的G盘里创建一个目录G:\reactnative-workspace,当作我RN所有项目的工作区间。

  • 2,打开命令提示符窗口,进去该目录,执行如下命令,创建一个RN项目,项目名为ReactNativeNewProject。

react-native init ReactNativeNewProject
  • 3,进入创建成功的ReactNative项目里,看看它的目录结构如下:
RN项目目录.PNG
  • 4,电脑连上手机,打开USB调试,执行adb devices确定连接成功

  • 5,执行以下命令,先进入我们的项目目录,然后启动项目

cd ReactNativeNewProject 进入项目目录

react-native run-android 启动这个项目

启动命令如下:

启动项目.png

在启动命令执行的过程中会自动启动node.js的服务,当底层检测我们的node.js服务未启动时会自动启动,我们也可以在启动我们项目命令(步骤5)之前通过下面的命令手动开启服务。

react-native start

启动成功后显示ready

Node服务器.PNG
  • 6,启动项目成功后,手机会出现如下界面。在启动项目时,失败过一次,显示安装到手机上失败,我的解决办法是删除项目,重新执行2,3,4,5步骤,安装成功。
Screenshot_2018-01-16-16-53-20-025_com.reactnativenewproject.png

总结:

按照上面的步骤成功的把RN的环境搭建成功,可能在其中的步骤中会出现问题,百度一下应该都好解决,今天也是第一天认真的接触RN,后续学习也会对文章进行修改和补充。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270