开发环境搭建
1、Homebrew
Mac系统基于ruby的包管理工具,解决安装Linux平台下开源工具时的库依赖等配置问题。
下载:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"(注:/usr/local目录不可写时,sudo chown -R `whoami` /usr/local 修复。)
使用:brew -v、brew list、brew search wget、brew install wget、brew remove wget
2、Node.js
brew install node安装NodeJS环境。
node -v,版本8.2.1。npm -v,版本5.3.0
注:安装完成后发现npm命令找不到(-bash: /usr/local/bin/npm: No such file or directory)。npm,node.js的包管理工具,一般在install node的时候即一同安装,但我在安装时因mac系统更新时旧版留在了错误的文件夹路径中,而且重装node.js时并没有覆盖掉,所以从错误的路径中手动删除(usr/local/bin中的npm显示原身,删除)。
3、npm install -g react-native-cli
ReactNative的命令行包管理工具。
//成功
/usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js
+ react-native-cli@2.0.1
added 41 packages in 5.394s
4、react-native init TestProject
在想要新建react-native项目的文件路径下执行,init后是自定义文件名
5、项目目录下react-native run-ios,或打开.xcodeproj直接运行(直接新建的reactnative项目不需要手动npm start,但旧项目集成reactnative需要在正确的路径下npm start)
已有项目接入ReactNative(此过程非常脆弱)
cocoapods接入
写在前面(重要):此次尝试是严格按照官网流程,导入当前最新版本0.46.4,但经历了痛彻心扉的失败,后来尝试引入0.29.2旧版本成功,于是对其全过程进行简要的分析记录。
1、项目目录下新建ReactComponent文件夹放入node_modules文件夹(旧版引入请使用备份、最新版可直接拷贝init的新项目中的文件夹)、index.ios.js(reactnative的root起点文件)、和package.json(此文件用于npm start启动服务)。
2、proflie中的本地引入配置(!注意路径的配置!):
旧版
pod 'React', :path =>'./ReactComponent/node_modules/react-native', :subspecs => ['Core', 'ART', 'RCTLinkingIOS', //根据需要引入 ]
新版
pod 'React',:path=>'./ReactComponent/node_modules/react-native',:subspecs=>['Core',
'DevSupport' #RN>=0.43时需要app内的menu应加DevSupport,
'RCTText',
'BatchedBridge'#RN>=0.46时必须引入 //根据需要引入]
# RN>=0.42.0 时应加入Yoga
pod "Yoga",:path=>"./ReactComponent/node_modules/react-native/ReactCommon/yoga" //还纠结了双引号单引号的问题,实际证明并无影响
3、配置info.plist中的NSAppTransportSecurity避免http访问失败(实际好像模拟器调试时并不会失败url--http://localhost:8081/index.ios.bundle?platform=ios&dev=true)
4、新建ReactRootVC在viewdidload中加入以下代码,npm start启动服务,运行。
NSString* strUrl =@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL* jsCodeLocation = [NSURLURLWithString:strUrl];
//注意项目名ProjectName与index.ios.js和package.json中的匹配
RCTRootView* rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"ProjectName" initialProperties:nil launchOptions:nil];
self.view= rootView;
5、0.46.4版本的引入失败
所有步骤都相同,编译的时候遇到如下错误
但是!!!最后!!!机智的我解决了这个问题。链接如下
https://github.com/facebook/react-native/issues/14925
简要来说就是0.46以上版本pod的配置应在profile里添加BatchedBridge的子模块依赖,教程里没有更新。
意不意外!?惊不惊喜!?
手动集成
本来打算再来一遍,但是既然pod引入问题已经解决,这块就不写了。
Tip
由于node_modules组件包很大,上传git的版本应忽略此文件夹(ReactComponent/*)。