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 [email protected]

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

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

ReactNative学习分享(1)环境搭建与配置_第1张图片
ReactNative学习分享(1)环境搭建与配置_第2张图片

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

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

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

你可能感兴趣的:(ReactNative学习分享(1)环境搭建与配置)