RN-Init

工具：visual studio code
微软免费跨平台代码编辑器 - 支持多种编程语言与系统。支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。
自定义设置：settings.json
拆分编辑器： ctrl+\
无插件化的代码diff：右键文件—>选择以进行比较
格式化js文件 右键代码区域—>格式代码 Alt+Shift+F

npm的命令：
安装模块：npm i react-native-swiper –save
查看模块：npm view react-native-swiper
删除模块：npm rm react-native-swiper –save
清理缓存：npm cache clean
查看帮助命令：npm help 命令

Mac环境搭建(黑苹果)

1.软件下载：
VMware Workstation 12
unlocker 208（for OS X 插件补丁）
Mac OS X 10.11镜像
2.安装VMware Workstation 12
3.安装unlocker208：不要打开虚拟机，解压unlocker 208 ，找到 unlocker208\win-install.cmd，以管理员身份打开win-install.cmd。 
4.新建虚拟机，点浏览找到你下载的Mac OS X 10.11镜像，先不要开启虚拟机，使用记事本打开OS X.vmx文件后，在smc.present = "TRUE" 后面添加     smc.version ="0"保存。
5.最后开启虚拟机，开始安装：选择语言，给虚拟磁盘分区（点击左上角的磁盘工具，格式化硬盘）。
6.安装VMware Tools
7.RN环境搭建：
a.安装Homebrew[软件管理器] /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
b.brew install node【npm】
c.brew install watchman【监视文件变化】
d.brew update && brew upgrade【保持上述几个程序为最新版本】
e.安装Xcode 7.1 【不要安装最新版本 注意安全风险发生】
启用虚拟机文件共享：
    1、在VMware的Options菜单中选择Shared Folders选项
    2、选择Always enabled选项
    3、然后选择要在Win7系统上共享的文件夹路径名
    4、在Win7系统下将改文件夹设为共享
    5、进入MAC系统桌面右键点击Finder前往菜单Connectting to Server
    6、在连接服务器对话框中输入[smb://Windows主机的IP地址],其中smb是访问Windows共享文件夹所使用的协议名称
    7、连接到Windows主机之后会显示该主机所共享的文件夹，选择想要访问的一个即可
    8、这样再次打开Finder的时候就可以直接访问到共享文件夹了 
f.npm install -g react-native-cli
g.将npm仓库源替换为国内镜像
h.react-native init project
i.运行iOS应用

MAC 下React Native的开发工具Nuclide
nuclide 只支持Mac 基于Atom
下载atom： https://atom.io/
安装nuclide： apm install nuclide
打开atom： 则可以看到nuclide的欢迎界面
安装flow:： brew install flow [一个静态的对js类型检查器]
nuclide代码自动补全提示的插件：
atom-react-native-css、 atom-react-native-autocomplete
nuclide自动保存代码的插件：autosave 需要setting enable

开发步骤：

1.加载组件
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,    
    View
    } from 'react-native';
2.创建组件
class DongFang extends Component {
    render() {
        return (
            <View style={[styles.flex,styles.topStatus]}>
            </View>
        );
    }
}
3.添加样式表
const styles = StyleSheet.create({
    flex:{
        flex:1,
    },
    topStatus:{
        marginTop:25,
    }   
});
4.注册入口
AppRegistry.registerComponent('DongFang', () => DongFang);

组件： View、Text、TextInput、Touchable、Image、Picker、ProgressBar、DrawerLayout、ViewPager、Navigator、WebView、ListView

开源组件：
react-native-swiper 轮播
react-native-tab-navigator Tab导航
react-native-side-menu 菜单
安装：在工程文件夹下执行 npm install xxx –save
导入：import SideMenu from ‘react-native-side-menu’;

跨平台的开源组件：rn-camera-roll
安装：npm install rn-camera-roll
iOS：import node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj
Android：Update your gradle files
react-native >= v0.15 ：react-native link rn-camera-roll
react-native = v0.14：
android/settings.gradle

include ':rn-camera-roll'
project(':rn-camera-roll').projectDir = new File(settingsDir, '../node_modules/rn-camera-roll/android')

android/app/build.gradle

dependencies {
  compile project(':rn-camera-roll')
}

Register the package into your MainActivity

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
 // REGISTER PACKAGE HERE 
.addPackage(new CameraRollPackage())                .setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
    mReactRootView.startReactApplication(mReactInstanceManager, "example", null);
    setContentView(mReactRootView);
    }

使用：

import CameraRoll from 'rn-camera-roll';
onPhotosFetchedSuccess(data) {
  const photos = data.edges.map((asset) => {
    return asset.node.image;
  });
  console.log(photos);
}
onPhotosFetchError(err) {
  // Handle error here 
}
fetchPhotos(count = 10, after) {
  CameraRoll.getPhotos({
    // take the first n photos after given photo uri 
    first: count,
    // after 
    after: "file:/storage/emulated/0/DCIM/Camera/IMG_20151126_115520477.jpg",
  }, this.onPhotosFetchedSuccess.bind(this), this.onPhotosFetchError.bind(this));
}

自定义组件：
export default class LZY extends Component{
constructor(props){
super(props);
this.state = {
};
}
};
引用：import LZY from ‘./LZY.js’;