React Native 整合
mac下為例：
安裝： npm install -g react-native-cli
1. 新建Podfile檔案，並配置需要使用的第三方庫
platform:ios, '8.0'
target 'NumberTileGame' do
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"
pod 'React', '0.13.0-rc'
end
2.安裝： pod install
3.在工程目錄下新建Components資料夾，和index.ios.js檔案
4.index.ios.js 檔案內容
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var EmbedRNMeituan = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀高度根據內容設定好牛逼呀99
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('NumberTileGame', () => EmbedRNMeituan);
5. info.plist 新增如下
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
6.建立顯示ReactNativi 的UIView
#import "ViewController.h"
#import "RCTRootView.h"
@interfaceViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[superviewDidLoad];
[selfinitRNView];
}
-(void)initRNView {
NSURL *jsCodeLocation;
jsCodeLocation = [NSURLURLWithString:@"http://192.168.1.109:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootViewalloc] initWithBundleURL:jsCodeLocation
moduleName:@"NumberTileGame"
initialProperties:nil
launchOptions:nil];
//注意，這裡是 @"EmbedRNMeituan"
rootView.frame = CGRectMake(0, 64, 300, 300);
[self.viewaddSubview:rootView];
}
- (void)didReceiveMemoryWarning {
[superdidReceiveMemoryWarning];
}
@end
7. 啟動rect服務
cd Pods/React/
npm run start