ios原生应用植入react|ios原生应用植入react native(一) ios原生应用植入reactnative(一)

还是写个教程吧，记录一下。
1、
在你的原生app文件目录下新建一个存放RN文件的文件夹
如图：

文章图片
新建个存放rn的文件夹.png
2、写个index.ios.js和package.json文件放在上面ReactComponent文件下，（当然你也可以从react native的demo中复制一个index.ios.js和package.json过来），其文件主要的代码如下：
index.ios.js：

import { AppRegistry } from 'react-native'; import App from './TestComponent'; //这个是你要显示的组件，这里我是另建一个js写组件，这个文件一定要放在ReactComponent文件内部,当然也可以直接写在index.ios.js内部, AppRegistry.registerComponent('rntestApp', () => App); //这个“rntestApp”对应你的项目名称

package.json：

{ "name": "rntestApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "^16.4.0", "react-native": "^0.55.4", "react-native-camera": "^1.1.4", "react-native-code-push": "^5.3.4", "react-native-tab-navigator": "^0.3.4", "react-navigation": "^2.5.5", "superagent": "^3.8.3" }, "devDependencies": { "babel-jest": "23.0.1", "babel-preset-react-native": "4.0.0", "jest": "23.1.0", "react-test-renderer": "16.3.1" }, "jest": { "preset": "react-native" } }

TestComponent.js代码如下：

/** * Created by dangwc on 2018/7/2. */ import React,{Component} from 'react'; import { View, Text, StyleSheet } from 'react-native'; export default class TestComponent extends Component{ render(){ return( 测试界面 ) } } var styles = StyleSheet.create({ flex1:{ flex:1, backgroundColor:'white', } })

3、上面的工作完成后，接下来就是导入RN的一些类库及相关的文件。
（3.1）导入文件mode_modules依赖包
终端：

1、cd 到ReactComponent这个文件 2、执行: npm install

依赖包下载完毕后，你会发现多了几个文件（把ios,android这两个文件删了，用不到）

文章图片
3.png
（3.2）pod建立关联
1》如果你的项目未建立pod管理（如果已建立可忽略这步）

（1）cd 你的项目文件路径（2）pod init

【ios原生应用植入react|ios原生应用植入react native(一)】2》在podfile中的内容如下

# Uncomment the next line to define a global platform for your project # platform :ios, '9.0'target 'rntestApp' do pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', # 如果RN版本 >= 0.45则加入此行 'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单 'RCTImage', 'RCTNetwork', 'RCTText', 'RCTWebSocket' ] pod "yoga", :path => './ReactComponent/node_modules/react-native/ReactCommon/yoga'# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖 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'# Pods for rntestApp target 'rntestAppTests' do inherit! :search_paths # Pods for testing end target 'rntestAppUITests' do inherit! :search_paths # Pods for testing end end

3》pod install完毕后，编译一下，保证无出错哦
4、在想要显示RN界面的控制器中构造RN的界面

- (void)viewDidLoad { [super viewDidLoad]; NSURL *jsCodeLocation; #ifdef DEBUG jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; #else jsCodeLocation = [CodePush bundleURL]; #endifRCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"rntestApp" initialProperties:nil launchOptions:nil]; rootView.frame = self.view.bounds; [self.view addSubview:rootView]; }

5、接下来就是开启本地调试服务器了