ReactNative开发环境

此内容根据徐赢老师的文档整理后写处

原版地址：https://tuomaxu.gitbooks.io/reactnative/content/

 

 

ReactNative是跨平开发的解决方案，在开发平台的选择上，mac平台和win平台均可以。

所须要工具以下：

1，Nodejs环境

2，create-react-native-app

3，Expo App

4，iPhone和安卓手机，或安卓手机模拟器（推荐使用夜神模拟器）

以上工具均有mac和win平台的安装包。

笔者使用的是mac平台作开发，全部下面演示都以mac平台进行。

 

 

安装Nodejs环境

1，进入http://nodejs.cnnodejs中文网，下载与自身环境相一致的nodejs安装包

2，安装包下载以后，双击进行安装

win平台的同窗注意，安装过程当中要关闭杀毒软件和各类安全工具

3，安装完成以后，打开命令行工具，检查是否安装成功，执行以下命令：

$ node -v

该命令执行结果为当前node版本，笔者当前版本为：

v6.9.1

4，检查NPM是否安装成功，

npm 是Node包管理工具，以后须要使用它来安装其余node程序包

在在命令行中输入以下命令：

$ npm -v

该命令执行结果为：

4.5.0

 

 

安装Yarn

Yarn是Facebook出品的一个依赖包管理工具，起做用和npm同样。但Yarn具备更多好用的特性：

• Yarn 会缓存它下载的每一个包，因此不须要重复下载。它还能并行化操做以最大化资源利用率，因此安装速度之快史无前例

• Yarn 在每一个安装包的代码执行前使用校验码验证包的完整性。

• Yarn 使用一个格式详尽但简洁的 lockfile 和一个精确的算法来安装，可以保证在一个系统上的运行的安装过程也会以一样的方式运行在其余系统上

• 网络适应单个请求失败不会致使安装失败，请求失败时会重试。

安装yarn

访问Yarn官网，下载响应平台的安装包，进行安装

使用Yarn

安装好以后，其余工具会自动使用Yarn进行加速。

 

安装create-react-native-app命令行工具

create-react-native-app是一个综合建立ReactNative工程，而且不须要配置的工具，它极大的简化了入门开发的流程。具体的内容，你们能够进入其github.com的主页进行浏览。

安装create-react-native-app须要使用npm进行，在任意目录下，输入以下命令，即可以在该目录下建立一个ReactNative工程。

$ npm install -g create-react-native-app

安装成功以后，会展现安装路径。如安装不成功，请检查网络，从新安装。

 

建立ReactNative工程

ReactNative工程的模板须要经过create-react-native-app工具进行建立。建立方法以下：

1，经过命令行进入存放ReactNative工程的文件夹。

2，在该文件夹下执行以下命令：

$ create-react-native-app myapp

myapp为工程名，能够更换为其余字符，但必须小写

安装过程须要1-5分钟不等，如想提高安装速度，能够安装yarn，详情见yarn官网

下面为笔者安装成功截图：

笔者使用了yarn进行提速，全部命令中显示为yarn

 

 

运行预览工程

1，工程建立完成以后，即可以启动工程，开始开发和调试。

启动工程，首先要使用命令行工具进入工程更目录，而后运行以下指令

$ npm start

工程 启动以后，会生成一个二维码和一个本地连接，经过此此二维码或本地连接，即可预览工程运行效果。

2，启动工程以后，须要在手机端安装Expo App，使用Expo App对所开发的ReactNative App进行预览运行。

安装ExpoApp的方法以下：

iOS平台：在AppStore中搜索Expo client，如图

Android平台下，访问此连接：http://expo.io/--/api/v2/versions/download-android-apk 下载安装包并安装，安装过程当中须要给此App所有权限。

3，Expo App在手机端安装完成以后，打开ExpoApp，经过其扫描二维码的功能，扫描生成的二维码，即可以在App内预览开发中的App工程

4，新建工程的运行效果为：