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

还是写个教程吧，记录一下。
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 

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];
#endif
    
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"rntestApp" initialProperties:nil launchOptions:nil];
   
    rootView.frame = self.view.bounds;
     [self.view addSubview:rootView];
}

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

cd 到node_modules所在的路径
npm start    

6、运行项目看一下效果：

运行效果图.png