React Native集成到IOS应用
附上另一篇RN集成到Android应用:http://blog.csdn.net/unhappy_long/article/details/77747153
我们默认有一个已有的ios项目,或者创建一个ios应用。
第一步: 我们首先要安装RN所依赖的包,在根目录下创建一个react的文件夹,然后在文件夹中创建一个名为package的json文件,在json文件中添加一下代码:
{ "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "16.0.0-alpha.12", "react-native": "0.47.2" } }完成之后,我们从命令窗口进入到react文件夹下面,使用 npm install 安装RN依赖包。
第二步:
同样的在react文件夹下面,创建一个名为index.ios的js文件,用于编写RN代码。完成后在js文件中加入一下代码:
'use strict'; import React from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>Hello, World</Text> <Text style={styles.hello}>尼玛的,终于好了---ios</Text> </View> ) } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);第三步: 安装CocoaPods,CocoaPods是针对iOS和Mac开发的包管理工具。我们用它来把React Native框架的代码下载下来并添加到你当前的项目中。 我们建议使用Homebrew来安装CocoaPods。
brew install cocoapods从技术上来讲,我们完全可以跳过CocoaPods,但是这样一来我们就需要手工来完成很多配置项。CocoaPods可以帮我们完成这些繁琐的工作。
第四步: 配置CocoaPods的依赖。在项目的根目录下运行,以下命令:
pod init使用该命令在项目根目录下创建一个Podfile文件。
然后在该文件里加入一下所依赖RN的配置代码:
# target的名字一般与你的项目名字相同 target 'RnToIos' do # 'node_modules'目录一般位于根目录中 # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path` pod 'React', :path => ‘./react/node_modules/react-native', :subspecs => [ 'Core', 'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单 'RCTText', 'RCTNetwork', 'RCTWebSocket', # 这个模块是用于调试功能的 'BatchedBridge' # 在这里继续添加你所需要的模块 ] # 如果你的RN版本 >= 0.42.0,则加入下面这行 pod "Yoga", :path => "./react/node_modules/react-native/ReactCommon/yoga" end然后在再执行以下命令,将RN的代码添加到你的项目中:
pod install成功之后,根目录下会生成一个(你的项目名.xcworkspace)的文件,也是我们将要使用的文件。
第五步: 我们使用xcode将pod生成的(你的项目名.xcworkspace)的文件打开,配置ReactRootView。在viewController加入以下代码:
引入头部
#import <React/RCTRootView.h> - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"; NSURL * jsCodeLocation = [NSURL URLWithString:strUrl]; RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MyReactNativeApp" initialProperties:nil launchOptions:nil]; self.view = rootView; }到这里,所以配置都结束了。
第六步: 我们在终端进入到项目根目录下的react文件夹下,使用
npm start启动本地服务器(package)。
然后使用xcode运行项目,就大功告成啦!!!
遇到的坑: 1.Podfile中RN配置路径别搞错了,一定要按照自己的目录进行配置。 2.完成配置后在xcode中运行,提示:
Undefined symbols for architecture x86_64: "_JSNoBytecodeFileFormatVersion", referenced from: +[RCTJavaScriptLoader loadBundleAtURL:onProgress:onComplete:] in RCTJavaScriptLoader.o +[RCTJavaScriptLoader attemptSynchronousLoadOfBundleAtURL:runtimeBCVersion:sourceLength:error:] in RCTJavaScriptLoader.o "facebook::react::parseTypeFromHeader(facebook::react::BundleHeader const&)", referenced from: +[RCTJavaScriptLoader attemptSynchronousLoadOfBundleAtURL:runtimeBCVersion:sourceLength:error:] in RCTJavaScriptLoader.o "facebook::react::customJSCWrapper()", referenced from: -[RCTDevSettings isJSCSamplingProfilerAvailable] in RCTDevSettings.o -[RCTDevSettings toggleJSCSamplingProfiler] in RCTDevSettings.o _RCTNSErrorFromJSErrorRef in RCTJSCErrorHandling.o -[RCTSamplingProfilerPackagerMethod handleRequest:withResponder:] in RCTSamplingProfilerPackagerMethod.o "facebook::react::systemJSCWrapper()", referenced from: -[RCTDevSettings isJSCSamplingProfilerAvailable] in RCTDevSettings.o -[RCTDevSettings toggleJSCSamplingProfiler] in RCTDevSettings.o _RCTNSErrorFromJSErrorRef in RCTJSCErrorHandling.o -[RCTSamplingProfilerPackagerMethod handleRequest:withResponder:] in RCTSamplingProfilerPackagerMethod.o ld: symbol(s) not found for architecture x86_64 clang: error: linker command failed with exit code 1 (use -v to see invocation)解决办法:在配置Podfile文件的时候,在subspecs中加入依赖BatchedBridge
最后附上源码地址:https://github.com/1035901787/RnToIos
