React Native config - LewinJun/reactNative GitHub Wiki

如果没安装react则需要先安装

如果没有xcode先安装xcode以及java jdk,java jdk 下载路径：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

1 安装brew：ruby -e "$(curl –insecure -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)", 如遇到安装html等问题，尝试在ruby前面加/usr/bin/
2 安装node：brew install node
3 安装Watchman：brew install watchman (Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能,packager可以快速捕捉文件的变化从而实现实时刷新）,验证是否成功 watchman -v
4 安装flow：brew install flow (Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法)
5 安装react和yarn：npm install -g yarn react-native-cli
6 安装开发工具atom，https://atom.io/ 然后命令 apm install nuclide

初始化react项目

1 react-native init 项目名称

现有项目配置react native

1 Android和iOS合并到一个根目录，创建一个文件夹如ReactDemo,在此文件夹创建android和ios 文件夹
2 分别把android和ios项目根目录复制到两个目录
3 在ReactDemo下创建package.json文件，不知道填啥，可以react-native init 一个项目把package.json复制过来，package.json内容如下:

{
	"name": "reactLewinDemo",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start",
		"test": "jest"
	},
	"dependencies": {
		"react": "16.0.0-alpha.12",
		"react-native": "0.46.4"
	},
	"devDependencies": {
		"babel-jest": "20.0.3",
		"babel-preset-react-native": "2.1.0",
		"jest": "20.0.4",
		"react-test-renderer": "16.0.0-alpha.12"
	},
	"jest": {
		"preset": "react-native"
	}
}

4 iOS项目引入react native,两种方式

1 pod

inhibit_all_warnings!
platform :ios, '8.0'

target 'Atongmu' do
    pod 'Yoga', :path => './../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
    pod 'React', :path => './../node_modules/react-native', :subspecs => [#pod的路径
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTActionSheet',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTSettings',
    'RCTVibration',
    'RCTAnimation',
    'RCTWebSocket',
    ]
end

target 'AtongmuTests' do
end

2 Librarys, 在根目录下执行react-native link RCTWebSocket 命令,

推荐使用pod引用

5 Android引用react-native

项目的budil.gradle，url "$rootDir/../node_modules/react-native/android"

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

项目app的build.gradle 添加：apply from: "../../node_modules/react-native/react.gradle" dependencies添加：compile "com.facebook.react:react-native:+" // From node_modules

AndroidManifest.xml 添加react设置activity

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

运行App

1 命令行进入到项目根目录，运行npm install 安装react native相关包 node_modules.
2 运行当前nodejs,npm start
3 运行iOS react-native run-ios,运行Android react-native run-android

windows 环境安装参考http://blog.csdn.net/u011068702/article/details/49448043

react官网 http://facebook.github.io/react-native/docs/getting-started.html