iOS 原生与ReactNative 混合开发之项目搭建
2017-03-03 本文已影响312人
LYSNote
这里介绍下,如何再原生项目里嵌入ReactNative控件
操作之前,你的电脑上要装有以下:
-
xcode
-
cocoapods
-
ReactNative相关组件,及其环境配置
1.首先是创建一个OC项目,如果你已有项目可跳过这个步骤,直接再文件根目录下操作
目录结构.png
2.由于本人是做iOS 开发的,因此只在iOS项目的基础上进行配置,再文件根目录下,创建一个文件夹,用于存放js文件和相关配置文件,为了方便理解,我对文件结构进行调整
调整后.png
3.接下来,打开终端
cd 根目录
touch package.json
open package.json
文件内容.png
react-native对react的版本有严格要求，高于或低于某个范围都不可以dependencies中的react和react-native的版本取决于你的具体需求你可以使用npm info react和npm info react-native来查看当前的最新版本
{
"name": “ReactNativeDemo”,
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.1",
"react-native": "0.39.2"
}
}
npm install
导入配置文件.png
4.使用cocoapods添加ReactNative组件
Podfile.png
pod init
# target的名字一般与你的项目名字相同
target 'ReactNativeDemo' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
# 这个模块是用于调试功能的 # 在这里继续添加你所需要的模块 ]
end
pod install
图.png
5.创建js文件
cd 根目录
touch index.ios.js
在js文件中,编写你的控件(这是中文网上摘取的,你们可以编写自己的js)
'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class RNHighScores extends React.Component {
render() {
var contents = this.props["scores"].map(
score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
);
return (
<View style={styles.container}>
<Text style={styles.highScoresTitle}>
2048 High Scores!
</Text>
<Text style={styles.scores}>
{contents}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
// 整体js模块的名称
AppRegistry.registerComponent('ReactNativeDemo', () => RNHighScores); // 这句要注意两个名字,第一个名字是项目的名字,第二个名字是上面控件的名字
图.png
6.接下来就是打开项目,编写OC部分
目录.png
在项目中导入:
导入.png
可能会报错,说文件找不到
那么需要做如下操作:
报错.png
项目中添加的代码.png
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL : jsCodeLocation moduleName : @"ReactNativeDemo" initialProperties : @{ @"scores" : @[ @{ @"name" : @"Alex", @"value": @"42" }, @{ @"name" : @"Joel", @"value": @"10" } ] } launchOptions : launchOptions]; UIViewController *vc = [[UIViewController alloc] init]; rootView.frame = [UIScreen mainScreen].bounds; [vc.view addSubview:rootView]; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.rootViewController = vc; [self.window makeKeyAndVisible]; return YES;}
6.到这一步还没有结束,你需要开启服务器
cd 根目录
// 开启本地服务器
npm start
然后就可以运行项目:或者如果你可以的话,终端输入下面的命令,如果你是按着上面的步骤搭建的项目,下面的命令是走不通的,具体原因,自己去百度
react-native run-iso
下面的黄色文字,意思是说,如果你把项目调成release模式,会加载的更快,也就是关闭debug模式
图.png
网络请求:
<key>NSAppTransportSecurity</key><dict><key>NSAllowsArbitraryLoads</key><true/></dict>
也许你会发现,在加载rn的时候,顶部会出现load from...类似的加载进度条,这个不必担心,relase(上线模式下)提示不显示的
