参考:
React Native中文网
 慕课网-ReactNative 基础与入门

前言

万事开头难, 还是有必要记录一下这个过程

搭建开发环境

首先参考教程React Native中文网教程搭建开发环境, 这里我就不叙述了, 简单来说就是要安装node, react-tive, xcode, Android Studio, Android sdk以及环境变量等

创建项目

首先打开命令行进入你想创建项目的目录下面, 然后执行命令
react-native init FirstApp

这里的FirstApp是你想创建的项目的名字, 可以自己定义, 接着react-native就会初始化项目并自动去下载一些依赖, 完成之后我们打开这个项目的结构可以看到是这样的

使用命令行运行iOS工程

使用命令行运行iOS工程十分的简单, 只要进入FirstApp目录, 然后执行一句
react-native run-ios就好了, 然后系统就会自动启动一个iOS模拟器, 将工程跑起来, 运行效果如图

按command + D能调出调试菜单
按command + R能够reload js文件

使用Xcode运行iOS工程

使用Xcode运行iOS工程依旧十分简单, 我们进入FirstApp/ios目录, 双击FirstApp.xcodeproj文件, 这样就会用Xcode把FirstApp/ios这个项目打开

然后选择一个模拟器, 点击三角形的那个运行按钮

这样就在模拟器上运行起来了, 十分的简单

使用命令行运行Android工程

运行Andorid工程总体来说要比运行iOS工程麻烦一点. 首先需要启动一个Android模拟器, 我个人习惯先打开Android Studio, 然后启动一个Android模拟器.然后也是同样的, 进入到FirstApp目录下, 执行命令react-native run-android

按command + M能够调出调试菜单

双击R能够直接Reload刷新界面, 如果发现不行请在模拟器设置中将Enable keyboard input勾选上, 然后再双击R试试

使用Android Studio运行Android工程

使用Android Studio, File -> open, 打开FirstApp/android目录, 等待编译完成之后, 点击绿色小三角的运行按钮将工程运行起来, 但是如图所见, 使用命令行在Android模拟器上运行项目是好的, 使用Android Studio跑Android项目就会报错:
unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

一番百度之后, 参考这篇博客react-native 最新版本爬坑经历 (unable to load script from assets 和 could not connect to development server.)
首先在main目录下创建assets目录

然后在FirstApp目录运行

react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/

完成之后会发现assets目录下多了一个文件

然后再在Android Studio中运行项目, 错误消除, 项目成功运行

关于React Native的版本

在终端中运行react-native --version可以查看当前安装的react native的版本信息

这个信息也可以在FirstApp/package.json文件中查看到

在终端中运行npm info react-native可以查看react native的版本信息

可以看到最新版本是0.56.0, 当前已经是最新版本
帮助:
react-native --help
升级:
react-native upgrade