欢迎使用CSDN-markdown编辑器
来源:互联网 发布:手机淘宝哪里投诉卖家 编辑:程序博客网 时间:2024/04/30 11:58
CocoaPods 集成 React-Native 到现有项目实践
Xcode,Ios
更详细资料请参考 http://reactnative.cn/docs/0.40/integration-with-existing-apps.html#content
准备工作,必需的软件:
Homebrew
Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。
使用 Homebrew 官网提供的指引安装 Homebrew。
安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。
npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global
Node.js
React Native 借助 Node.js,即 JavaScript 运行时来创建 JavaScript 代码。使用Homebrew安装。
brew install node
watchman
接下来,使用 homebrew 安装 watchman,一个来自Facebook 的观察程序:
brew install watchman
通过配置 watchman,React 实现了在代码发生变化时,完成相关的重建的功能。就像在使用 Xcode 时,每次保存文件都会进行一次创建。
Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:
sudo chown -R `whoami` /usr/local
IDE
Nuclide(可选)
Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。
点击这里阅读Nuclide的入门文档。
Sublime Text(可选)
WebStorm(可选)
开始:
STEP 1 : 安装node_modules包
创建package.json文件在项目的根目录下,这是为工程添加依赖库。里面有工程的版本信息和所需要的依赖库,第三方库等
{ "name": "YourProjectName", "version": “1.0.0", "private": true, "scripts": { "start": "node ./node_modules/react-native/local-cli/cli.js start" }, //所需要的库 "dependencies": { "react": "15.4.0", "react-native": “0.39.0", "react-native-looped-carousel": "0.0.12”,// 组件 }}
注意上面的
/node_modules/react-native
这个路径,保持一致
然后在项目的根目录下运行
npm install
安装package.json中所需要的库。完成后在项目根目录下会生成一个node_modules文件夹
STEP 2: pod所需要的库到工程
创建podfile文件,利用Cocoapods安装podfile中所涉及到的库。
target 'YourProjectName' do # Your 'node_modules' directory is probably in the root of your project, # but if not, adjust the `:path` accordingly pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', 'RCTText’,’RCTNetwork’, 'RCTWebSocket', ]end
注意上面的
/node_modules/react-native
这个路径,保持一致
然后进行 pod 安装库
pod install
STEP 3: 创建index.iOS文件
在根目录下创建ReactComponent文件夹,在ReactComponent下创建一个index.ios.js文件,写一个简单的textview。
注意,我们以后创建的React Native js文件都在ReactComponent这个文件夹下。
注意index.ios的存放位置
import React from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';class SimpleApp extends React.Component { render() { return <View style={styles.container}> <Text style={styles.container1} > This is a simple application.</Text> </View>; }}const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', backgroundColor: 'green' }, container1: { flex: 1, fontSize: 20, textAlign: 'center', backgroundColor: 'green', color: 'red' }});AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
SimpleApp就是你的模块名,这个在后面会要用到。
STEP 4:添加到原生项目
往应用里添加容器视图
你需要添加一个容器视图来容纳React Native组件。它可以是你应用里任何的UIView。
不过,为了让代码更整洁,我们可以派生一个UIView,取名ReactView。打开你的Yourproject.xcworkspace来创建一个新的ReactView类(你也可以取任何你想要的名字!)
// ReactView.h@interface ReactView : UIView@end
在想要管理这个视图的视图管理器中,添加一个outlet然后连接它:
// ViewController.m@interface ViewController ()@property (weak, nonatomic) IBOutlet ReactView *reactView;@end
在ReactView.m中,我们需要先使用你的index.ios.bundle的URI来初始化RCTRootView (index.ios.bundle会由packager服务创建,可以通过React Native服务器访问到。我们会在后面讨论这个问题。)。
往容器视图里添加RCTRootView,来包含你的React Native应用。
- (instancetype)init{ self = [super init]; if (self) { [self loadRN]; } return self;}- (instancetype)initWithCoder:(NSCoder *)coder{ self = [super initWithCoder:coder]; if (self) { [self loadRN]; } return self;}- (instancetype)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { [self loadRN]; } return self;}- (void)loadRN { NSURL *jsCodeLocation = [NSURL URLWithString:@"http://127.0.0.1:8081/index.ios.bundle?platform=ios"]; // For production use, this `NSURL` could instead point to a pre-bundled file on disk: // // NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; // // generated by "Bundle React Native code and images" build step. // // curl http://localhost:8081/index.ios.bundle -o main.jsbundle self.rootView = [[RCTRootView alloc]initWithBundleURL:jsCodeLocation moduleName:@"SimpleApp" initialProperties:nil launchOptions:nil]; [self addSubview:self.rootView];}- (void)layoutSubviews { [super layoutSubviews]; self.rootView.frame = self.bounds;}
STEP 5:启动开发服务器。
在工程的根目录下,我们可以开启React Native开发服务器:
(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)
这条命令会启动一个React Native开发服务器,用于构建我们的bundle文件。–root选项用来标明你的React Native应用所在的根目录。在我们这里是ReactComponent目录,里面有一个index.ios.js文件。开发服务器启动后会打包出index.ios.bundle文件来,并可以通过http://localhost:8081/index.ios.bundle来访问。
这里有个坑,在模拟器调试的时候,要将上面的http://localhost:8081/index.ios.bundle 替换为http://127.0.0.1:8081/index.ios.bundle,
原因之一:做本地局域网开发环境,大部分都会做服务器映射处理,localhost 被指向特定的IP 而不是本机的127.0.0.1, 就会出现这样的问题。
错误信息处理
1. Invariant Violation:Application 项目名 has not been registered.
这个错误的原因是index.ios.js 中的注册名,和代码中的引用名不同;
index.ios.js 中为”Study”
AppRegistry.registerComponent('Study', () => ReactTest);
ios 代码中用了别的名字”SimpleApp”
[[RCTRootView alloc]initWithBundleURL:jsCodeLocation moduleName:@"SimpleApp" initialProperties:nil launchOptions:nil];
2. Could not connect to development server.
这个错误的原因是localost识别问题。解决方式一,修改host文件。方式二, 使用本机ip, 运行之前首先要启动npm start
3. Native module cannot be null
这个错误的原因是项目中使用的ReactNative模块没有加入到项目中,解决方式参考集成步骤中的5. 仔细检查自己的项目和报错信息。
4. Undefined symbols for architecture x86_64: “std::terminate()”, referenced from
运行项目时Xcode报错。
解决办法:add -lc++ in Other Linker Flags in your xcode project build settings.
参考资料
学习: http://reactnative.cn
布局: http://blog.csdn.net/teng_ontheway/article/details/5187091
Navigator组件: http://www.jianshu.com/p/91fa0f34895e
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 【Python】安装scipy库步骤
- linker command failed with exit code 1 (use -v to see invocation)
- .Net(C#)自定义WinForm控件之小结篇
- Git思维导图
- Mac电脑MAMP PRO集成环境Apache启动不了
- 欢迎使用CSDN-markdown编辑器
- onInterceptTouchEvent和onTouchEvent调用关系详解
- 20. Valid Parentheses
- idea常用快捷键设置(改为eclipse相似)
- MySQL服务器参数优化
- js去重
- iOS 原生二维码扫描、生成、识别
- Linux中的grep命令实例
- 安装mysql报错问题处理