就現(xiàn)階段而言 , 完全用ReactNative 構(gòu)建App 還是不太現(xiàn)實 .
但其替代Web與原生App 進行交互, 還是很令我期待的 .
在網(wǎng)上查到了很多集成的方法 , 在此分享一下集成時遇到的一些坑 .
框架集成
集成方法大致分為以下幾種
** 運用CocoaPod 集成 **
** 手動集成框架 **
1. CocoaPod 集成
參考文獻: http://blog.csdn.net/l863784757/article/details/50592341
1.1 文件中創(chuàng)建 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
在終端執(zhí)行 pod install
幾點注意的是
- 目前使用Pod 只能集成React-Native 0.13版本 .
(版本偏低 , 目前版本都到0.37 , 期待Pod更新新版本)- 下載架包的時候還是需要翻墻, 否則下載不下來. 而且下載時間也比較長.
1.2 添加頭文件搜索路徑
頭文件搜索路徑 : $(PODS_ROOT)/React/React
1.3 在工程中 創(chuàng)建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];
}
并打開網(wǎng)絡請求
1.5 啟動服務器
創(chuàng)建 run.sh 文件
#! /bin/bash
(cd Pods/React; npm run start)
然后給run.sh添加可執(zhí)行權(quán)限：
chmod +x run.sh
啟動服務器:
./run.sh
2. 手動集成框架
參考文獻 : https://segmentfault.com/a/1190000004253916
手動集成框架的好處
- 免去翻墻下載的過程, 節(jié)省時間.
- 可以直接集成最新的 架包.
- 0.37版本架包下載地址
2.1 將架包導入項目.
將node_modules文件夾放到工程文件夾中
創(chuàng)建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 在工程中 創(chuàng)建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];
}
并打開網(wǎng)絡請求
至此手動加載框架也大功告成
下一篇準備分享 原生App 與 ReactNative的 數(shù)據(jù)交互
如果感覺還不錯 , 點擊喜歡鼓勵一下哦 ????????
