React Native集成到IOS应用
附上另一篇RN集成到Android应用:
我们默认有一个已有的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