关于RN的环境搭建请参考搭建开发环境，最好自己创建了AwesomeProject，因为有些配置文件可以直接从Demo中copy
1.在你的Xcode项目中找到XXX.xcodeproj，在其上层目录新建文件夹RNDemoMudules（为了解耦RN组件于原生工程，方便单独管理RN项目），并在其中创建package.json
package.json：（可以直接从AwesomeProject项目中找到该文件，注意要修改项目名称）
{
"name": "RNDemo",//你的项目名称
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.8"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/runtime": "^7.4.5",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
然后在终端进入当前目录，运行下面命令
$ npm install //若npm没有安装，自行度娘安装。
2.安装依赖库，一般IOS开发的cocoapods是必须安装的，这里就不做说明了。
- 注意Podfile和我们平常安装一样要在Project目录下
- 在Podflie文件必须要增加platform控制，一般在IOS 8.0 以上
Podfile的具体内容：
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'RNDemo' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
rn_path = '../RNDemoMudules/node_modules/react-native'
pod 'React', :path => rn_path, :subspecs => [
'Core',
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 'BatchedBridge' # 注意ReactNative中文网站没有使用该库，会导致Xcode运行时报错。调试时提示该库已经被弃用了，但还没找到对应的库
# 在这里继续添加你所需要的RN模块
'CxxBridge',
'RCTActionSheet',
'RCTAnimation',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTSettings',
'RCTVibration',
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod 'yoga', :path => "#{rn_path}/ReactCommon/yoga"
pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
end
安装Podfile：
$ pod install
3.创建 RN项目组件
在与刚才创建的package.json文件的同级目录下创建index.js文件（旧版本是创建index.ios.js 和 index.Android.js文件，这点要注意一下） 可以直接将AwesomeProject目录中的index.js、App.js、app.json复制到此目录下
index.js：
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</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,
},
});
app.json:（记得修改项目名称，原名称为AwesomeProject）
{
"name": "RNDemo",
"displayName": "RNDemo"
}
4.在Xcode项目中创建RN项目组件容器
现在我们需要使用RCTRootView类来家在我们的ReactNative模块，其实在我们上面做那么多的工作的时候，工程会给我们生成一个.bundle文件，我们只需要加载该bundle文件即可，这就和IOS的资源文件加载机制相吻合了，最后JS文件以bundle的形式加载。
新建一个RNDemoViewController。
RNDemoViewController.h:
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface RNDemoViewController : UIViewController
@end
NS_ASSUME_NONNULL_END
RNDemoViewController.m:
#import "RNDemoViewController.h"
#import <React/RCTRootView.h>
@interface RNDemoViewController ()
@end
@implementation RNDemoViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"RNDemo"
initialProperties : nil
launchOptions : nil];
self.view = rootView;
}
@end
现在万事俱备，只欠东风了，但是目前我们的JS文件并没有打包到工程中，那么我们需要给把JS文件放到服务器上去，这些ReactNative都帮我们处理好了，当我们后续需要打包的时候，会处理成Bundle的形式内嵌到工程里面去，那么现在我们需要借助ReactNative来把服务器运行起来：
$ react-native start
现在就真的万事俱备了，若有Xcode的话直接运行Xcode就可以了，若没有Xcode的话，那可以直接使用ReactNative的命令：
$ react-native run-ios
引用：
https://blog.csdn.net/flylovesky127/article/details/79795601
https://github.com/facebook/react-native/issues/24192
