官方链接：reactnative.cn/docs/0.47/integration-with-existing-apps.html#content
1、创建一个根文件夹，里面创建一个字文件夹，命名ios
2、在根文件夹下创建一个package.json 文件，终端touch package.json 就可以
{ "name": "MyReactNativeApp",
"version": "0.0.1", "private": true,
"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" },
"dependencies": { "react": "16.0.0-alpha.6", "react-native": "0.44.3" }
}
3、$ npm install 安装JavaScript依赖包。（别告诉我你没装npm）
目前的目录结构如下图：
4、官方文档建议大家使用cocoapods 来配置环境，so，你得装个cocoapods，（听人劝，吃饱饭！）
5、在 ios文件下，将我们的iOS工程拖进来。look，这里需要注意是将ios工程里的文件。我在测试的时候，将整个文件往里一丢，后续的配置中出现了很多问题。看了React Native 初始化项目的目录结构，才发现不是这么回事。不多说了，看图！ 这样的结构才能让react-native run-ios 的时候找到 .xcodeproj 文件 能够运行起来。
6、在 ios 文件下创建 Podfile文件，用来配置 所需要使用的 组件。
$vi Podfile
内容如下：
platform:ios,'8.0' #适配平台
target 'TabBarTest' do #目标文件
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end
7、$pod install 没有报错的话，恭喜你，环境配置成功了！
8、在根目录下，创建一个ios.index.js 文件，既然是混合开发，没有点 js文件说不过去。代码很简单，如下：
'use strict'import React,{Component} from 'react';
import { AppRegistry, Text, View} from 'react-native';
class TestView extends Component{
render(){
return(<Text>It is a text</Text>)
}
}
AppRegistry.registerComponent('MyReactNativeApp',()=>TestView);
9、在xcode项目中，引用 #import <React/RCTRootView.h> 头文件，用来装 js 的页面
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://host:8081/index.ios.bundle?platform=ios"];
// NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"MyReactNativeApp"
initialProperties :nil
launchOptions : nil];
self.view = rootView;
ps：运行时产生以下错误:Could not connect to development server.
Ensure thefollowing:
- Node server is running and available on the same network - run'npm start'from react-native root
- Node server URL is correctly set in AppDelegate
将host 切换成你本地的ip。
10、在根目录下，启动终端。$npm start 启动开发服务器，这个终端是不能关闭的哦
11、可以通过Go2Shell （App Store 自行下载）重启一个终端 $react-native run-ios 运行iOS模拟器。
如果出现错误，$npm install 关闭终端重启一下，在运行。
在环境配置的过程中可能出现很多问题，需要你安装、升级一些文件。一般报错问题，度娘都能解决的。
Good Luck ～
网友评论