ReactNative学习分享(1)环境搭建与配置

首先声明,部分资料与图片来自小码哥,需要学习的朋友,文章最下面有链接,还望下载资料。

————————————————————第一步————————————————

1.1安装Homebrew

Homebrew是OS X的套件管理器,我们可以用它安装很多插件、组件。

Shell环境下执行命令:

% ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

由于连接的是国外网站,可能会执行失败,多试几次就能安装成功。

验证安装:

% brew -v

Homebrew 0.9.5 (git revision fb9a; last commit 2016-01-10)

1.2安装npm和node.js

安装完node.js默认npm也有了

https://nodejs.org/en/download/

npm : 全称是NodePackageManger,是一个NodeJS包管理和分发工具,已经成为了非官方的发布node模块的标准

1.3 安装WatchMan

该插件用于监控bug文件和文件变化,并且可以出发指定的操作

安装方式:brew install watchman

1.4安装flow

flow是一个JS的静态类型检查器,建议安装,方便查找代码中可能存在的类型错误

安装方式:brew install flow

——————————————————————第二步————————————————

2.1 安装React Native

安装方式 : npm install -g react-native-cli

若出现 error rolling back则代表无权限操作,需在命令的前面加上 sudo 意味着获取最高权限

2.2 iOS的环境需要做少iOS 7.0及以上

安卓的环境需求,Android Studio,需要安装JDK,在进行安装Android Studio

安装Genymotion模拟器

2.3 初始化项目

终端 cd 拖入创建的文件夹,回车

react-native init 项目名称(英文)/ ( like —  react-native init XueYangRN )

如果初始化项目很慢,需要镜像到国内网站

npm config set registry https://registry.npm.taobao.org

npm config set registry https://npm.taobao.org/dist

2.54 运行程序

在创建好的项目中,打开iOS的Xcode文件,运行。

安卓的项目运行安卓的文件

2.5 文件编写

打开WebStorm,打开创建的文件夹 例如(TuyueRN)

刚刚打开文件会有很多错误,点击右上角的Switch进行加载JSX的语法

2.6.1管理react-native库的版本

查看当前的RN版本

命令行:react-native --version

通过打开项目中的package.json查看

2.6.2 更新本地RN的版本

命令行:npm update -g react-native-cli

npm : 全称是NodePackageManger,是一个NodeJS包管理和分发工具,已经成为了非官方的发布node模块的标准

npm包地址

2.6.3 查看所有react-native版本信息

https://www.npmjs.com/package/react-native

命令行:npm info react-native

2.6.4 升级或降级npm包的版本

npm install   --save react-native@0.18

2.6.5 更新项目temliates文件( 可选 )

新的npm包会包含更新在运行react-native init命令生成的一些动态文件,通过命令行进行查询

react-native upgrade

2.7 WebStorm 设备 ReactNative 的代码提示

从github上下载XML的插件

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

安装插件

将ReactNative.xml复制到 ~/Library/Preferences/WebStome10/templates

—————————————————篇外音----------------------------------------

JS真实名字叫ECMScript,又叫JScript

从1998 2.0——ES6,但是大部在用ES5

------------------------------------------文件结构截图解析----------------------------------------

由于本人也是刚刚接触RN,小白一枚,如有不对的地方还望多多指教,感谢各位!

百度云的部分相关教程:链接: https://pan.baidu.com/s/1kUSued5 密码: nuis

愿在RN的路上与各位大神并肩前行。

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

推荐阅读更多精彩内容