ReactNative-intro

ReactNative模板构建工具使用

Author: Necfol

说明: 本文档用于指导前端React Native的开发,如需开发其他其他框架应用,不适用本文档

前期准备

  1. ReactNative 的基本概念ReactNative文档
  2. es6 开发基本知识 es6 基本文档
  3. Node 环境(Node >=5.0.0,Yarn)下载地址
  4. Android Studio环境Android Studio
  5. Xcode 环境(Mac适用)

1、搭建脚手架

1.1、安装脚手架工具

通过 npm 安装 React Native 脚手架命令行工具

1
npm install -g yarn react-native-cli

1.2、初始化脚手架

由于官方RN0.45版本有问题,推荐使用0.44.3稳定版本

1
$ react-native init ${your_project} --template micrn --version 0.44.3

如果需要特定版本则:

1
$ react-native init ${your_project} --template micrn --version ${version}

如果需要最新版本则:

1
$ react-native init ${your_project} --template micrn --version

例如: react-native init test –template micrn –version 0.44.3

命令会在当前的文件夹下生成一个文件夹,这个文件夹就是我们的项目文件夹

2、 运行项目

1.进入上一步创建的文件夹,运行命令(初次运行此项目时需要输入)

1
node script/addDev.js

命令运行后,会去下载相关的dev依赖,并且替换包名称。这是由于React Native官方提供的构建模板生成工具不支持devDependencies,所以自定义devDependencies.json文件,项目生成之后,通过脚本把devDependencies.json中的依赖依次安装并且添加到package.json中;官方提供的构建模板生成工具也不支持自动在template构建的项目中替换应用名称,这个脚本也达到了自动替换应用名称的目的。

2.然后启动项目

1
2
ios(Mac环境): react-native run-ios
android: react-native run-android

安卓在运行项目之前,需要先打开Android Studio运行安卓模拟器!!!即AVD Manager.
安卓第一次运行的时候,命令行下载依赖可能比较慢,可以参考安装,通过Android Studio进行快速安装依赖。
项目启动在ios模拟器,或者安卓模拟器上,并且会打开命令行运行构建服务,⚠️不能把进程杀掉!
可以通过chrome 安装调试工具,或者安装react-native-debugger,再或者React Developer Tools

分享到