React Native初探（一） - Mac

当前水平

1、没有javascript开发经验，javascript对我来说就是个黑盒
2、以前做过网页设计和布局，了解HTML+CSS+DIV
3、了解swift语言（对学习ES6似乎很有帮助，语法相似）
4、了解React，了解响应式编程，对数据流，状态有一定了解，使用过RxSwift
5、无服务器经验

这一系列文章的目的

经过一个礼拜对react native的探索，渐渐熟悉react native的使用套路，但这一过程对我而言并不容易。node.js，ES6，js，服务器，redux，flux等我都比较陌生，对react native从编码，到调试，到做react native的应用，踩过很多坑，有种想从入门到放弃的冲动。在这里分享自己踩过的坑，记录下我一路走来的学习资源。

注：以下内容全程打开科学上网模式，因为我经常卡到'npm install'里面

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

安装React Native：

当前环境：
开发系统：Mac
移动系统：iOS

注意：如果以下brew install的速度太慢，可以在github上的releases里去下载安装。

屏幕快照 2017-01-14 14.41.05.png

第一步：安装依赖
打开命令行使用brew安装依赖：

brew install node
brew install watchman

可以使用

which node
which watchman

查看是否安装。
第二步：使用npm安装react-native命令行接口

npm install -g react-native-cli

如果得到Cannot find module 'npmlog'这种错误提示，则通过curl -0 -L http://npmjs.org/install.sh | sudo sh安装npm
第三步：Xcode的安装

运行Welcome

打开命令行输入

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

可以看到会使用iOS模拟器打开AwesomeProject应用
在AwesomeProject目录下，可以看到一个ios目录，使用Xcode打开ios目录下的AwesomeProject.xcodeproj，可以在Xcode中运行该应用。

注意：在Xcode下运行该应用前，应该现在命令行打开本地服务器环境：npm start。

在已有的iOS APP中使用React Native

已有的swift项目集成React Native测试：https://github.com/lyxia/IntegrationWithExistingApps
使用iOS开发的包管理工具CocoaPods来本地的React Native框架代码。
第一步：在本地安装React Native框架
在项目的根目录下（与.xcodeproj同级的目录）创建package.json文件，写入：

{ 
  "name": "NumberTileGame", 
  "version": "0.0.1", 
  "private": true, 
  "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, 
  "dependencies": 
  {
    "react": "15.0.2", 
    "react-native": "0.26.1" 
  }
}

保存后，在项目的根目录下打开命令行输入：npm install，node模块将会安装在node_modules目录中。
第二步：使用Subspecs管理React Native框架
React Native中所有可用的Subspecs都在node_modules/react-native/React.podspec里面可以看到。如果之前的项目没有使用pod，在项目的根目录下打开命令行输入pod init，即可创建一个空的Podfile文件。
在Podfile文件中写入要引入的subspecs,例如：

pod 'React', :path => 'node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket', # needed for debugging
]

然后pod install
第三步：注册React Native组件
在项目的根目录下创建'index.ios.js'文件，写一个组件使用AppRegistry注册：

AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

第四步：在Xcode中使用React Native组件

#import "RCTRootView.h"
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL : jsCodeLocation 
                                    moduleName : @"RNHighScores" 
                                    initialProperties : @{ 
                                                                  @"scores" : @[ 
                                                                      @{ @"name" : @"Alex", @"value": @"42" }, 
                                                                      @{ @"name" : @"Joel", @"value": @"10" }
                                                                 ] } 
                                    launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView 

第五步：运行
运行方式：
第一种：react-native run-ios，这种方式会在没有打开服务的情况下，自动帮你打开服务
第二种：先执行npm start，成功后，在Xcode中运行