该篇文章主要分为两部分
- 1.集成过程
- 2.可能遇到的问题（比较蠢的问题）
一：集成过程
1.1首先要有个开发环境吧
1.2开始集成
以下过程来自React native中文网，我只是提炼了一下。毕竟字数很多。看我这个方便些。
- step1：创建一个oc项目
- step2：按照RN中文网的建议，根目录创建一个/ios文件，用来存放iOS的源码。简单来说就是把所有创建工程时生成的所有东西都丢到/ios里面去。
- step3：在/ios中pod init，创建一个pod文件，用来下载、管理RN所需要的库，并且将以下复制到pod中。具体每一个是做什么用的，可以自行Google。
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
'RCTActionSheet',
'RCTAnimation',
'RCTCameraRoll',
'RCTGeolocation',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTLinkingIOS'
]
- step4：pod集成完后直接 pod install坐等加载完毕
- step5：回到项目根目录，创建两个文件。分别是package.json和index.ios.js文件。
向package.json文件中复制以下代码：
{
"name": "NumberTileGame",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"npm": "^6.0.1",
"react": "15.4.1",
"react-native": "0.39.2"
}
}
向index.ios.js文件中写入以下内容(RN中文网的例子)
'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('RNHighScores', () => RNHighScores);
//注意:这个'RNHighScores'在oc代码中会被调用到，要保持oc代码中调用和这里的书写一致。
- step6:在根目录执行npm install，执行完后，可能会要求更新，这个随意都可以。这个过程会将node_modules下载到根目录中。
- step7：需要配置一下网络设置。打开info.plist，添加以下配置。
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
- step8：我们要修改一下oc的代码，把RN自带的view加进项目中去。别忘了，导入#import "RCTRootView.h"
因为这里完全按照的是RN中文网去做。可以将一下代码放入ViewController中，放在touchesbegin中就好了。
[super touchesBegan:touches withEvent:event];
NSLog(@"High Score Button Pressed");
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"RNHighScores"
initialProperties :
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
}
]
}
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
- step9：最后一步非常重要，启动你的服务。。（我忘记了这一步导致加载不出来，很蠢的问题）。终端进入根目录，npm start。启动服务即可。
- last step：运行项目即可。xcode run 或者react-native run-ios
二：遇到的问题
2.1 cocoapods找不到头文件
solution：user header search paths 添加${SRCROOT}。
2.2 程序启动就crash，并报错image not found。
solution：这个问题并不是说图片找不到，其实是有些库找不到。只需要移除那些库就可以了。
2.3 如果出现了tcp connect failed
solution：1.请去启动服务 2.配置网络环境。详见step7
三：the end
具体配置不是很难，按照步骤走就没问题。
再次重申：本文章只是根据RN中文网步骤走了一遍，提炼了一下，方便大家看。
因为部门技术栈的原因，公司选型可能会用Weex，毕竟RN的学习成本实在太高，但是RN是一个很好的方向，我会在以后不定期更新学习进度。
