013-React-Native-React-Native-cl

欢迎各位同学加入：
React-Native群：397885169
大前端群：544587175
大神超多，热情无私帮助解决各种问题。

---

一：
1-：在中文网的开发环境搭建过程中，需要在Homebrew 、Watchman、Flow、nvm、node等运行环境安装完后，第一件事情就是安装React-Native命令行工具并初始化项目，命令如下：

npm install -g react-native-cli
react-native init AwesomeProject

分析得出：第一条命令是从npm服务器上拉取react-native-cli,因为npm服务器不在国内，所以经常会很慢。聪明的国人已经想出了解决办法，通过翻墙来解决此问题。npm提供了一个register的属性，可以让开发者自由的设置镜像地址。第二条命令是使用react-native命令来初始化项目。

在官方的指导文档里面，有以下两个命令：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

2-： 在npm官网，打开react-nativ-cli的相关介绍，可以看出多了一个名词“Sinopia”。

Sinopia：是FaceBook推荐的一个本地npm私服。这个私服的做法是优先从自己的仓库中拉取模块，如果发现没有，便从远端的NPM服务器拉取。架设私服，除了速度快以外，还有一个重要的原因就是一些内部的隐私模块也可以发在私服上供内部成员使用。

二：
1-：搭建私服
安装命令：

npm install -g sinopia

启动命令：

npm install -g sinopia

启动后，可以查看到如下日志：

warn  --- config file  - /Users/youname/.config/sinopia/config.yaml
warn  --- http address - http://localhost:4873/

其中，日志中的“config file”为“sinopia”的配置地址，“http address”为“sinopia”的主页地址。打开“/Users/youname/.config/sinopia/config.yaml”可以看到默认的配置信息如下：

//仓库保存的路径
storage: /Users/erhu/.local/share/sinopia/storage
//用户验证相关
auth:
  htpasswd:
  //存放用户信息
    file: ./htpasswd
    #max_users: 1000

//配置Npm服务器
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

//配置模块信息
packages:
  '@*/*':
    //访问权限设置
    access: $all
    //发布权限的设置
    publish: $authenticated

  //公有模块信息
  '*':
    access: $all
    publish: $authenticated
    proxy: npmjs

创建新用户：

npm adduser --registry http://localhost:4873

按照命令行中的提示，依次输入Username、Passworld、Email即可完成用户的创建。

设置npm镜像地址：

npm set registry http://localhost:4873/

发布npm包到私服地址，先登录：

npm login

按照命令行中的提示，依次输入Username、Passworld、Email。

登录完成后，进行发布：

npm publish

远端访问：
上面只是在本地搭起了NPM服务器，只能通过本地来访问，如果要做到远端访问的话，需要这样来启动“sinopia”，同时，其他npm相关配置也需要进行修改：

sinopia -l IP地址:端口

注意：此处发布的是自定义的npm库，此库可以发布到私有服务器上，也可以发布到npm官方网站供其他人使用。关于npm库的建立和发布具体可参考如下：
http://www.jianshu.com/p/decdab27b18d

三：使用Template
日常开发中，经常使用“react-native init XXXX”来初始化项目。
在需要使用的其他组件或者代码时，需要进行相关配置和代码迁移，比较麻烦，可以使用官方提供的“Template”来进行相关公共代码的配置。
使用如下命令：

react-native inti MyApp --template demo 

即可在本地新建一个项目，同时，会包含这个“react-native-template-demo”里面的一些示例和公共代码。

基于此功能，我们可以进行以下优化：
1-：自定义npm库代码可以包含一些常用的组件，工具类，比如网络请求，登陆页面以及首页等相关代码。
此时，当新建初始化相关项目时，会自动生成相关代码模块并进行引用。

2-：支持以下三种方式的引用：

使用npm模版库:

react-native init MyApp --template XXX

 使用本地模版库：

react-native init MyApp --template file:///path_to/react-native-template-XXXX

使用远程库 https:// or git:// URL:

react-native init MyApp --template git://.../react-native-template-XXXX

其中：需要注意：所有的模版命名需要遵守以下命名规则：

“react-native-template-XXXX”

引用时使用如下命令：

react-native init MyApp  --template XXXX

使用以上：有以下优势：
1-：团体人员相互合作更密切。代码共享，公共库代码统一管理，避免私有化。
2-：使用npm库更方便快捷。自定义npm可发布到私服，供团体使用
3-：减少不必要的代码迁移和重复劳动。

四：WebStorm模版配置文件
具体可参考http://www.jianshu.com/p/cbec02ccc273