首先声明,部分资料与图片来自小码哥,需要学习的朋友,文章最下面有链接,还望下载资料。
————————————————————第一步————————————————
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的路上与各位大神并肩前行。