1.安装React Native的命令行工具（react-native-cli）
$ npm install -g react-native-cli
2.安装cocoapods
3.安装React Native
在项目中建一个名为ReactComponent的文件夹, 用于存放我们react-native的相关文件, 再创建一个package.json文件, 用于初始化react-native.（文件夹名字自定义）
文件目录结构如下：
image.png
package.json文件，文件内容如下：
{
"name": "RNDemo_iOS",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.5"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/runtime": "^7.5.5",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.2.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
其中name是项目的名称，其他内容都是一些项目版本类的信息，具体怎么生成了，建议使用react-native init 项目名称，在本地新建一个RN工程，然后把工程里面的package.json文件复制过来，这样能保证你的配置是最新的本地RN配置。
2.安装React Native依赖包
$ cd ReactComponent
$ npm install
执行完之后，可以看到RN文件夹路径下多一个node_modules文件夹，其中都是RN配置一来文件。
3.创建 index.ios.js（js文件入口）
在ReactComponent文件夹里创建index.ios.js文件，作为js文件入口（文件名一定要保证是这个文件名称，不然后面会有坑）
文件内容如下：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class RNDemo_iOS extends 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.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const 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('RNDemo_iOS', () => RNDemo_iOS);
记住js文件添加完成后，修改内部项目的名称为当前项目的名称，不然后面可能找不到js配置文件。
4.Cocoapods集成React Native
创建prodfile，文件内容如下：
platform :ios, “9.0”
require_relative './ReactComponent/node_modules/@react-native-community/cli-platform-ios/native_modules'
target 'RNDemo_iOS' do
pod 'React', :path => './ReactComponent/node_modules/react-native/'
pod 'React-Core', :path => './ReactComponent/node_modules/react-native/React'
pod 'React-DevSupport', :path => './ReactComponent/node_modules/react-native/React'
pod 'React-RCTActionSheet', :path => './ReactComponent/node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => './ReactComponent/node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => './ReactComponent/node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => './ReactComponent/node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => './ReactComponent/node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => './ReactComponent/node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => './ReactComponent/node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => './ReactComponent/node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => './ReactComponent/node_modules/react-native/Libraries/Vibration'
pod 'React-RCTWebSocket', :path => './ReactComponent/node_modules/react-native/Libraries/WebSocket'
pod 'React-cxxreact', :path => './ReactComponent/node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => './ReactComponent/node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => './ReactComponent/node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => './ReactComponent/node_modules/react-native/ReactCommon/jsinspector'
pod 'yoga', :path => './ReactComponent/node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => './ReactComponent/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => './ReactComponent/node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => './ReactComponent/node_modules/react-native/third-party-podspecs/Folly.podspec'
end
添加完成，执行pod install（podfile文件内容具体是什么，也可以像上面一样，先创建一个新的RN工程，一般都是有cocoapod的，查看里面的podfile文件的内容，复制过来，修改一下文件路径就可以）
5.集成完成之后，可以尝试向对应ViewController 添加RCTRootView
#import "ViewController.h"
#import <React/RCTRootView.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"RNDemo_iOS"
initialProperties:nil
launchOptions:nil];
self.view = rootView;
}
@end
在iOS 9以上的系统中，除非明确指明，否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做，在尝试通过http连接到服务器时，会遭遇这个错误 - Could not connect to development serve
打开工程中的 Info.list 文件，添加下面配置即可：
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
6.现在集成完成，运行项目，并不是直接运行工程就好了，首先要启动开发服务器
在RN文件夹路径之下，执行 $ react-native start
然后运行我们的项目，如果运行不报错就证明已经集成好了
网友评论