就现阶段而言 , 完全用ReactNative 构建App 还是不太现实 .
但其替代Web与原生App 进行交互, 还是很令我期待的 .
在网上查到了很多集成的方法 , 在此分享一下集成时遇到的一些坑 .
框架集成
集成方法大致分为以下几种
** 运用CocoaPod 集成 **
** 手动集成框架 **
1. CocoaPod 集成
参考文献: http://blog.csdn.net/l863784757/article/details/50592341
1.1 文件中创建 Podfile 文件
platform :ios, '7.0'
target 'ReactNativeProject' do
pod 'React', '~> 0.13.0-rc'
pod "React/RCTText"
pod "React/RCTActionSheet"
pod "React/RCTGeolocation"
pod "React/RCTImage"
pod "React/RCTLinkingIOS"
pod "React/RCTNetwork"
pod "React/RCTSettings"
pod "React/RCTVibration"
pod "React/RCTWebSocket"
end
在终端执行 pod install
几点注意的是
- 目前使用Pod 只能集成React-Native 0.13版本 .
(版本偏低 , 目前版本都到0.37 , 期待Pod更新新版本)- 下载架包的时候还是需要翻墙, 否则下载不下来. 而且下载时间也比较长.
1.2 添加头文件搜索路径
头文件搜索路径 : $(PODS_ROOT)/React/React
1.3 在工程中 创建index.iOS.js文件
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var ReactNativeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'antiquewhite',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
因为导入的是0.13 版本框架 , 所以只支持ES5 的写法 , 不支持ES6 .
1.4 在原生代码中添加RCTRootView 页面
- (void)createReactNativeView{
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rnView = [[RCTRootView alloc]
initWithBundleURL:jsCodeLocation
moduleName:@"ReactNativeProject"
initialProperties:nil
launchOptions:nil];
rnView.frame = CGRectMake(0, 150 , SCREEN_WIDTH , SCREEN_HEIGHT-150);
[self.view addSubview:rnView];
}
并打开网络请求
1.5 启动服务器
创建 run.sh 文件
#! /bin/bash
(cd Pods/React; npm run start)
然后给run.sh添加可执行权限：
chmod +x run.sh
启动服务器:
./run.sh
2. 手动集成框架
参考文献 : https://segmentfault.com/a/1190000004253916
手动集成框架的好处
- 免去翻墙下载的过程, 节省时间.
- 可以直接集成最新的 架包.
- 0.37版本架包下载地址
2.1 将架包导入项目.
将node_modules文件夹放到工程文件夹中
创建Libraries文件夹
2.2 将.xcodeproj文件 拖拽到工程
.xcodeproj文件清单
node_modules/react-native/React/React.xcodeproj
node_modules/react-native/Libraries/Image/RCTImage.xcodeproj
node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj
node_modules/react-native/Libraries/Text/RCTText.xcodeproj
node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj
node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj
node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj
node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj
node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj
node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj
2.3 添加 .a 文件
2.4 修改 Build Settings 配置文件
头文件搜索路径 : $(SRCROOT)/node_modules/react-native/React
添加为 -ObjC
2.5 在工程中 创建index.iOS.js文件
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Text
} from 'react-native';
export default class ReactNativeProject2 extends React.Component{
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'antiquewhite',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
}
});
AppRegistry.registerComponent('ReactNativeProject2', () => ReactNativeProject2);
因为集成的框架是0.37版本 , 所以只支持ES6 的写法 , 不支持ES5 (很坑)
2.6 在原生代码中添加RCTRootView 页面
- (void)createReactNativeView{
//RCTBundleURLProvider 是0.29版本新添加的类
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];;
RCTRootView *rnView = [[RCTRootView alloc]
initWithBundleURL:jsCodeLocation
moduleName:@"ReactNativeProject2"
initialProperties:nil
launchOptions:nil];
rnView.frame = CGRectMake(0, 150 , SCREEN_WIDTH , SCREEN_HEIGHT-150);
[self.view addSubview:rnView];
}
并打开网络请求
至此手动加载框架也大功告成
下一篇准备分享 原生App 与 ReactNative的 数据交互
如果感觉还不错 , 点击喜欢鼓励一下哦 👇👇👇👇
