react-native 项目初始化

  打算写一个系列的文章来记录一个RN的App从开始到发布的过程。

1. 初始化
2. 布局
3. 组件使用
4. SDK
5. 打包

  react-native 使用JS来开发app，能够运行于IOS和Android两大平台。这使得开发App的门槛大大降低，也让很多本来没有native App开发能力的公司蠢蠢欲动(比如我们部门)，毕竟这种方式比H5之类的要流畅很多。最近看到微软又推出了一个有意思的东西：reactxp 。之前RN的热更新，微软就有个code push。现在又推出这么一个东西，号称一处编写，可以在四个平台上运行，也是蛮有意思的。不过貌似很多大佬都不看好这个项目，不知道能活多久。

一、开发设备

　　迟早是需要一台mac的。我最初是在windows上做Android环境开发，TP240体验非常差，reload一次要等很久。而且在搭环境时也很不顺利，各种奇葩错误。黑苹果可以凑合一段时间，体验比在win上要好很多，安装环境非常顺利。但真机调试什么的还是比较麻烦，所以最好还是有一台mac。

　　在开发时我一般是直接调试iphone模拟器，因为这个reload很快。当一个功能模块开发完了再跑一下Android的设备，确认功能无误(一般情况只要没有用什么特殊组件都是没什么问题的)。

二、安装环境

　　这点不多解释，如果在win上，各种错误都写不完。而且现在好像是两周一版本，也许你在win上费力搞了半天修复一个问题，下个版本就变了。如果在mac上，我搭了这么多次环境都非常顺利，没有遇到过什么错误。

　　按照文档上一步步来就好：http://reactnative.cn/

三、目录结构

　　1. 自用  

　　　　项目初始化就是把项目结构搭起来并且把react-native及它的一些依赖包都安装上。我一般会使用这样一个目录结构

　　      

　　      index.xxx.js 是入口文件，这里值得一说的是RN会根据平台自动加载不同名称的文件，比如这里Android平台就会加载 index.android.js。在其他的自定义组件中也可以使用这样的命名来区分（如果需要区分平台的话）。

• App
  • Assets - 资源文件
  • Components - 组件
  • Configs - 配置
  • Utils - 工具
  • Views - 页面

　　大概就是这样的一个目录，开发下来感觉基本还比较合理。

　2. ignite

　　ignite 这是一个react-native的CLI工具，使用下来感觉像 yeoman。通过一些命令 来生成整个项目并添加页面、组件等其他东西。

github上的一个 Quick Example:

$ npm install -g ignite-cli
$ ignite new PizzaApp
$ cd PizzaApp
$ ignite add maps
$ ignite add vector-icons
$ ignite generate screen PizzaLocationList
$ ignite generate component PizzaLocation
$ ignite generate map StoreLocator
$ ignite add i18n
$ ignite remove i18n
$ ignite i love you

这个在安装过程中会有一些提示，比如是否需要vector icons什么的。可以根据需要具体安装。最终呈现出来的目录是这样

这个目录结构比较复杂，具体可以安装一下自己看。

目录结构的话，我感觉第一种就挺好也足够用了，可能我开发的都是一些比较小的App。用不到这么复杂的结构。

 

四、编辑器

　　RN开发所用编辑器很多都可以用，毕竟只是写个JS。webStorm、sublime等等都有，官方推荐的那个Nuclide ，反正我周围没什么人用。最近看到一款有意思的编辑器 Deco。只从官网首页上乍一看很酷炫。但下载下来实际开发的时候，拖控件的功能显得很鸡肋，开发的时候都是自己写的。不过这让我想起了微软的VS系列编辑器（VS Code除外）。如果能坚持做下去，以后也许会很好用。

　　1. WebStorm

　　　WebStorm 支持 Windows、Mac OS X、Linux 三大桌面平台，不过和 Android Studio 可以免费使用不同，WebStorm 是需要付费使用的，只有 30 天的试用期。 由于 React Native 是基于 React 的，而 React 使用的是 JSX 语法，因此，使用 WebStorm 开发 React Native 之前，我们首先需要设置支持的 Javascript 语法，点击 WebStorm-Preferences，在打开的对话框中选择 Javascript language version 为 JSX Harmony 即可在代码编辑器中识别 JSX，如下图所示：

　　

    2. Deco

　　  Deco : https://www.decoide.org/ ,这款编辑器目前只支持mac环境，它包含控制台，可以直接在编辑器里启动模拟器。当然最吸引人的是直接拖拽一些组件到界面(当然是代码界面，不是可视化)。

　　

 

　　左下方可以看到那些可拖拽的组件，不止是官方组件还包含一些比较优秀的第三方组件，右侧可以调整这些组件的一些属性，上方启动模拟器。如果模拟器开启了hot reload的话，应该就是首页上的效果：

　　

　　 初始化完成后，就可以开始写一些东西run起来了。RN里要画一个页面，就需要明白它的布局，熟悉它的布局规则才能画出符合要求并适配何种屏幕的页面了。

　　这个下次再写。

 

参考链接：

http://reactnative.cn/

https://microsoft.github.io/reactxp/

https://www.decoide.org/

http://blog.csdn.net/xiaole0313/article/details/53508026　　

转载于:https://www.cnblogs.com/johnxc/p/6800703.html