IGNITE生成项目分解(1)

2017-01-05  本文已影响1110人  oreofish

IGNITE的官方地址：https://github.com/infinitered/ignite

IGNITE是一个React Native的脚手架生成器（了解ROR的可以理解为rails命令），通过一个命令就可以生成一个结构完整的、可工作的空白react native项目，后续的开发就是向这个项目添砖加瓦，这比从头构建一个RN项目节省很多时间。而且IGNITE默认集成的很多库也都是不二之选，包含了前人的经验。本文解析一下ignite生成项目的结构。

基本安装和命令

使用ignite先要安装：

  1. 安装命令：npm install -g react-native-ignite
  2. 生成你的第一个项目，这需要一段时间：ignite new MyApplication
  3. 生成好的项目是可运行的。进入MyApplication目录运行以下命令就能看到成果了，如果这一步有问题，很可能是ios或者android原生编译环境没有设置好。
  1. 如果没跑起来，可以用npm start命令
    开始几步很简单吧，除了react-native命令，其他都是npm命令，安装的也大部分是js代码，如果有问题，可以上网查查npm的基本用法。

除了生成脚手架项目，用ignite命令还能生成其他组件：

这些命令都很有用，可以先知道有哪些，具体用到时再看。

目录结构

项目目录结构和各部分的作用如下：

采用的库

项目集成了很多库，下面列出所有库的主要功能，主要也是为了备查，知道都是做什么用的，用到时再深入了解。

生产环境依赖库：

生产环境依赖库简单总结。可以分为几类：

开发环境依赖库：

除了下面的库，还有两个地方可以找到不错的开发好的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开始执行。

从这里可以看出，一个scene是一个页面，但是页面内容本质上是一个Component。为了理解方便，有时这个组件叫container，有时这个组件叫screen。可以用Scene的参数对它做小的定制。

content={<DrawerContent />}

<RoundedButton onPress={NavigationActions.componentExamples}> 
  Component Examples Screen
</RoundedButton>

它是一个自定义的圆角按钮，定义不复杂。如果用android原生的9patch做这个按钮，可是很麻烦。

if (Platform.OS === 'android') {
  return (
<Text style={styles.sectionText}>
 Android only: Animations are slow?
</Text> 
  )
}

这里redux、seamless-immutable、reduxsauce和redux-saga之间的关系还没看明白。

总结
貌似到这view的部分也就差不多了。model相关的几个关键库的合作关系下次再写。

上一篇下一篇

猜你喜欢

热点阅读