IGNITE的官方地址：https://github.com/infinitered/ignite
IGNITE是一个React Native的脚手架生成器（了解ROR的可以理解为rails命令），通过一个命令就可以生成一个结构完整的、可工作的空白react native项目，后续的开发就是向这个项目添砖加瓦，这比从头构建一个RN项目节省很多时间。而且IGNITE默认集成的很多库也都是不二之选，包含了前人的经验。本文解析一下ignite生成项目的结构。
基本安装和命令
使用ignite先要安装：
安装命令：npm install -g react-native-ignite
生成你的第一个项目，这需要一段时间：ignite new MyApplication
生成好的项目是可运行的。进入MyApplication目录运行以下命令就能看到成果了，如果这一步有问题，很可能是ios或者android原生编译环境没有设置好。
react-native run-ios
react-native run-android
如果没跑起来，可以用npm start命令
开始几步很简单吧，除了react-native命令，其他都是npm命令，安装的也大部分是js代码，如果有问题，可以上网查查npm的基本用法。
除了生成脚手架项目，用ignite命令还能生成其他组件：
生成初始项目：ignite new MyApplication
添加组件：ignite generate component SmoothButton
添加容器：ignite generate container SubMenu
添加页面：ignite generate screen Settings
添加listview：ignite generate listview HotDates
添加新的数据：ignite generate redux Login
添加网络请求：ignite generate saga Login
添加地图控件：ignite generate mapview MapScreen
导入图片资源：ignite import imagesfile
这些命令都很有用，可以先知道有哪些，具体用到时再看。
目录结构
项目目录结构和各部分的作用如下：
App：ReactJS代码，主要的业务逻辑都在这里，后面详细说明。
Tests：使用了AVA测试框架：https://github.com/avajs/ava，后面说明。
android：android原生代码。只有一个主application和一个主activity。这里的代码只是用来把react启动起来，没有任何业务逻辑，初学可以忽略。
ios：iOS原生代码。跟android目录一样，有效代码只有几行，没有任何业务逻辑，初学可以忽略。
fastlane：https://github.com/fastlane/fastlane支持ios/mac/android的自动发布工具
我们主要关注的是App目录，其他部分等需要时再做了解。
采用的库
项目集成了很多库，下面列出所有库的主要功能，主要也是为了备查，知道都是做什么用的，用到时再深入了解。
生产环境依赖库：
apisauce：js的JSON API客户端。https://github.com/skellock/apisauce
format-json：json格式化。https://github.com/johan/format-json
lodash：下一代underline，扩展js库
querystringify：URL辅助工具。https://github.com/unshiftio/querystringify
ramda：函数式编程工具集。http://ramdajs.com/
react
react-native
react-native-animatable
react-native-config
react-native-device-info
react-native-drawer
react-native-i18n
react-native-maps
react-native-router-flux：RN路由解释器。用页面(activity)名称实现页面间跳转。https://github.com/aksonov/react-native-router-flux
react-native-vector-icons：3000个字体图标。https://github.com/oblador/react-native-vector-icons
react-redux
redux
redux-logger
redux-persist：自动将redux持久化到AsyncStoragex中的工具。https://github.com/rt2zz/redux-persist
redux-saga：redux异步处理工具
reduxsauce：redux简化库，包含createActions, createReducer, createTypes等。
seamless-immutable：不可变数据结构。https://github.com/rtfeldman/seamless-immutable
生产环境依赖库简单总结。可以分为几类：
辅助工具：format-json、lodash、querystirngify这些属于辅助工具，是一些常用工具集。
react类：react开头的库，都是处理view的。
redux类：redux开头的库，都是处理数据的。特别是seamless-immutable、reduxsauce和redux-saga这3个库串联起来，可以方便的解决redux数据的云同步问题。可以参考这篇文章。
开发环境依赖库：
ava：js自动化测试工具。https://github.com/avajs/ava
babel-eslint
babel-preset-es2015
enzyme：测试辅助工具集。https://github.com/airbnb/enzyme
flow-bin：可以用命令执行flow的工具。
ghooks
mockery：js的mock工具。
nyc
react-addons-test-utils
react-dom
react-native-mock
reactotron-apisauce：reactotron是一个在控制台上控制、监控RN应用的调试器。
reactotron-react-native
reactotron-redux
reactotron-redux-saga
snazzy
standard-flow
除了下面的库，还有两个地方可以找到不错的开发好的RN库。一个是https://github.com/react-native-community/React-Native-Elements，常用的界面元素都有。另一个是https://js.coach/react-native，可以用来搜开发好的控件。例如微信支付模块等。这个网站就是用react开发的。
React Native
介绍完周边的依赖，现在开始进入正题。
这个项目中真正的代码都在App目录下。App中的目录结构很清晰，叫什么名字放的就是什么东西。containers里都是容器，images里都是图片，所以这里主要跟踪运行逻辑做介绍。
项目根目录的两个文件index.android.js和index.ios.js是不同平台的入口文件，文件内容完全一样，都是调用App/Containers/App.js开始执行。
App/Containers/App.js
RN程序的总入口。它的地位有点类似android中的application。这里用来关联redux store。
App/Containers/RootContainer.js
根容器。所有的页面都在这里显示。这里用到了StatusBar和NavigationRouter。StatusBar是自带的状态栏控件，指手机屏幕最上边显示电池和时间那个条。可以控制它的背景色、透明度、是否显示等。NavigationRouter是一个自定义的组件。
App/Navigation/NavigationRouter.js
Router中描述了所有scene，每个scene是一个页面(对应android中的activity或者fragment)。最外层的drawer和drawerChildrenWrapper是一个抽屉结构的菜单部分和页面部分。drawer的菜单部分在NavigationDrawer中再介绍，这里只说页面部分。可以看到页面部分加载了很多style来定制外观。内部包含了若干个scene，其中第一个scene使用了initial关键字，表示这个页面是第一个显示的页面。这里使用了react-native-router-flux的路由特性。每个页面的key就是它的路由名字，component就是显示时使用的组件。这些页面还还可以定制标题、导航条、导航条左功能和导航条右功能。
从这里可以看出，一个scene是一个页面，但是页面内容本质上是一个Component。为了理解方便，有时这个组件叫container，有时这个组件叫screen。可以用Scene的参数对它做小的定制。
App/Navigation/NavigationDrawer.js
drawer为什么是个抽屉组件呢？因为这里用的就是，来自react-native-drawer库。这里可以指定很多动作，例如打开、关闭时的动作。还有显示哪些菜单，是用的一个新的组件。
content={}
App/Containers/PresentationScreen.js
应用打开时的首页。这里都是view的代码，使用了View/Image/ScrollView/Text等自带控件，容易看懂。只有一个有趣的，是
Component Examples Screen
它是一个自定义的圆角按钮，定义不复杂。如果用android原生的9patch做这个按钮，可是很麻烦。
App/Containers/Styles/AllComponentsScreenStyle.js
展示了如何显示只针对特定平台的内容。
if (Platform.OS === 'android') {
return (
Android only: Animations are slow?
)
}
App/Containers/Styles/UsageExamplesScreenStyle.js
这个页面比较复杂，演示了登录等内容。先看render()中，都是普通代码，主要交互代码都在renderUsageExamples ()中。在这个函数中：
根据登录状态显示登录、退出按钮。这个状态是放在this.props中的，结合其他代码，能看出来，只有用户交互的变量放在state中，来自网络的变化都用的props。
登录按钮对应的onPress动作是NavigationActions.login。愣了一下没看到，后来看到这个NavigationActions就是react-native-router-flux的Actions才明白，这就是一次路由跳转。跳转去名为login的Scene，即loginScreen。
点击下边的小图标可以获得温度。获取温度的代码在Services/Api.js中，在Sagas/index.js中重新绑定了。
后面有几个页面跳转。
App/Containers/Styles/LoginScreenStyle.js
填写用户名和密码，保存到state中。
在组件mount前和mount后，会监听虚拟键盘的状态，要调整显示高度和宽度。用Metrics.screenHeight和Metrics.screenWidth获取屏幕大小。这两个应该是像素数。
如果取消，就Actions.pop退出当前页。
如果确定，就调用LoginRedux和LoginSagas中的函数做登录。登录动作应该是sagas的put做的，更改state，没有实际的网络请求。
这里redux、seamless-immutable、reduxsauce和redux-saga之间的关系还没看明白。
App/Containers/APITestingScreen.js
请求json数据并显示。
App/Containers/ThemeScreen.js
多view显示的一个示例。
作者：MackJson
链接：http://www.jianshu.com/p/cb8dc64e650a
來源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。