React-Native 嵌入iOS

下面需要安装的
一

Homebrew
Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Watchman
是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman

cocopod
是一个iOS 包管理工具.为了安装RN相关的库.

http://code4app.com/article/cocoapods-install-usage

Flow

Flow是一个静态的JS类型检查工具。语法检查工具

brew install flow

Node

使用Homebrew来安装Node.js.

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本，一般都满足要求。
brew install node

Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

注意:npm install 的安装目录,一般现在终端cd到对应的目录(node_modules),然后安装到node_modules目录里

---

二.
嵌入React-Native(简称RN),有两种.第一种新建纯RN项目,第二种OC与RN混编.我这里讲的是嵌入老项目,如果是RN新项目,坑是不多的.

首先你得有一个package.json,名字就叫这个,然后npm intsall,cd到你想导入的目录(比如我的是RNComponent目录)你会发现多出一个node_modules 目录,这个目录就是你的依赖包

{
  "name": "xxx",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.43.3",
    "react-native-md5": "^1.0.0",
    "react-native-swiper": "^1.5.4",
    "react-native-viewpager": "^0.2.13",
    "react-timer-mixin": "^0.13.3"
  }
}

1."name": "xxx",你的target 名字

2.dependencies下的都是我导入的第三方库(react-native-md5对应的是md5,react-native-swiper这个是轮播图)

3.怎么导入第三方库?
npm i xxx --save
比如npm i react-timer-mixin --save (--save的意思是把这个导入信息写入到package.json的dependencies里)

4.第三方库怎么用?
在node_modules目录下找到对应的库的README.md这里会有用法

---

Podflie 文件 一般放在项目根目录,将下面代码粘贴到你的Podflie里

platform :ios, "8.0"
use_frameworks!
target "xxx" do 
# 取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径（一定要确保正确～～）。
pod "Yoga", :path => './RNComponent/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => './RNComponent/node_modules/react-native', :subspecs => [
'Core',
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTAnimation',
]
end

注意:
1.target名字换成你的项目,务必英文
2.subspecs后面是你需要的RN库,用什么导入什么
3.path路径不要写错需要导入到node_modules目录下
4.然后在终端cd到项目目录 pod install

可能出现警告的情况,一定不要忽略,会导致项目无法编译

Pasted Graphic.png

然后打开工作空间编译一下,可能还是编译不过去在target-build setting里设置一下

only.png

---

三.
这个时候该导入的都导入进去了,这时候你还需要一个入口文件index.ios.js和index.android.js.

1DB3CE9C-47D4-4E7B-91F5-7505B72CD5C6.png

现在的目录结构,只导入了index.ios.js

3AEAA798-E715-4275-BC78-C892F68ACFCC.png

这时先切换到RNComponent目录下,npm start打开本地服务器
现在可以跑一下了command+R.如果跑通不了,基本上是文件链接错误,出现这个问题就是导入的时候有环节不对.
1.在index.ios.js里写一些代码看看效果,
2.然后在你想热更新的界面写上如下代码

 NSString * strUrl = @"http://你的IP:8081/index.ios.bundle?platform=ios&dev=true";
 NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
    
    /**
     参数一：加载页面的地址可以理解为（热更新链接）
     参数二：项目名称
     :returns:
     */
    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                         moduleName:@"xxxx"
                                                  initialProperties:@{@"index" : @"main"}
                                                      launchOptions:nil];
    self.view = rootView;

1.moduleName:注册名
AppRegistry.registerComponent('ListViewDemo3', () => ListViewDemo3);
这个的moduleName 就是ListViewDemo3

2.initialProperties:一个对象,在index.ios.js 这么取var index = this.props['index'];对的的value 就是main这个模块.

3.ip需要换成你对应的ip,怎么找?在系统偏好设置->网络,这时候你就可以本地调试了

---

以上基本算是嵌入到项目里了
总结:记录一下自己的新的,坑还是不少的,每个踩过的坑就是经验,其实写的不是很细致,很多东西展开的写其实很多,学习RN最好是有前段的基础html+css+js +nodeJS,先期先学习RN项目,之后再研究如何将RN嵌入到项目中.
如果有错误,往指正!