下面需要安装的
一
Homebrew
Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Watchman
是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
brew install watchman
Cocoapod
是一个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
可能出现警告的情况,一定不要忽略,会导致项目无法编译
然后打开工作空间编译一下,可能还是编译不过去在target-build setting里设置一下
三.
这个时候该导入的都导入进去了,这时候你还需要一个入口文件index.ios.js和index.android.js.
现在的目录结构,只导入了index.ios.js
这时先切换到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嵌入到项目中.
如果有错误,往指正!
