iOS原生混合RN开发最佳实践

iOS原生混合RN开发详解

作过原生iOS开发或者Android开发的同窗们确定也都了解Hybrid，有一些Hybrid的开发经验，目前咱们企业开发中运用最普遍的Hybrid App技术就是原生与H5 hybrid，在早期的时候，可能部分同窗也接触过PhoneGap等hybrid技术，今天咱们就简单来聊下一种比较新的Hybrid技术方案，原生App与ReactNativie Hybrid，若是有同窗们对React Native技术不熟悉的同窗，能够查看做者简书中对React Native基础的讲解：React Native入门到实战讲解

示例Demo地址

• 初级Demo示例
• 高级Demo示例

image

具体步骤

• 建立一个iOS原生项目
• 将iOS原生项目支持pod
• 调整目前项目工程的文件夹结构
• 添加RN依赖相关文件
• 安装React Native
• 修改Podfile文件，原生安装React Native依赖库
• 在iOS原生页面填加RN页面入口
• 修改RN入口文件 index.ios.js
• 执行npm start 运行项目

建立一个iOS原生项目

使用Xcode建立一个空的项目，这个应该不用多说了

image

项目支持pod

这一操做步骤一样也很简单，咱们只须要执行下面的几条命令便可，若是对cocoapods 安装使用不熟悉的同窗请参照做者简书

• 建立podfile文件，咱们在有xcodeproj文件的同级目录下执行下面命令，这时咱们的项目文件中就多了一个Podfile文件

$ pod init

• 执行pod install 命令来安装pod，一样，这个命令也是在有xcodeproj同级目录下，安装完成后，咱们的项目多了一个

$ pod install

image

image

注意： 这里对原生iOS不熟悉的同窗们须要注意了，当咱们使用pod来做为库管理工具，后面咱们打开项目运行，咱们就须要打开上图所示的xcworkspace文件了

调整目前项目工程的文件夹结构

这里对文件夹作结构调整是为了后期更好的将Android原始项目也使用RN Hybrid，使iOS和Android共享一份React Native框架，共享同一份JS文件，调整的后的文件夹结构以下

image

添加RN依赖相关文件

到这里，咱们原生的iOS项目目录结构已近调整完毕，后面咱们须要处理的都是RN相关的内容了，这里须要建立的文件有点多，你们能够直接将示例Demo中的这几个文件直接拖到本身的项目中，而后在作修改便可

• 首先咱们须要建立package.json文件
• 建立index.ios.js文件
• 建立index.android.js文件
• 建立bundle文件夹，注意这个文件夹是后面咱们接入CodePush热更新时使用的

安装React Native

安装React Native这个也很简单，咱们也是简单的执行下面的命令便可，注意：执行npm 系列的命令，咱们都须要在项目根目录（有package.json文件的目录）下执行

$ npm install

package.json文件内容以下

{
  "name": "iOSHybridRNDemo", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "prop-types": "^15.6.1", "react": "16.0.0", "react-native": "0.50.3", "react-native-code-push": "^5.2.2", "react-native-root-toast": "^1.3.0", "react-native-router-flux": "^4.0.0-beta.24", "react-native-simple-store": "^1.3.0", "react-native-storage": "^0.2.2", "react-native-vector-icons": "^4.3.0", "react-redux": "^5.0.6", "redux": "^3.7.2", "redux-actions": "^2.2.1", "redux-promise-middleware": "^4.4.1", "redux-thunk": "^2.2.0" }, "devDependencies": { "babel-jest": "22.4.1", "babel-preset-react-native": "4.0.0", "jest": "22.4.2", "react-test-renderer": "16.0.0" }, "jest": { "preset": "react-native" } } 

注意：由于咱们项目中使用到了react-native-vector-icons 这个iconFont组件须要依赖原生，因此咱们执行完 npm install 以后，咱们还须要 再执行一个 react-native link react-native-vector-icons 命令来安装原生依赖

$ react-native link react-native-vector-icons 

image

当咱们执行完npm install 命令以后，咱们再打开项目目录，发现多了一个 node_modules 文件夹，这个文件夹就是咱们安装的React Native全部的依赖库

修改Podfile文件，原生安装React Native依赖库

后面咱们都是使用Pod来管理原生的依赖库，安装React Native依赖库，咱们只须要将下面的Podfile文件中的内容添加进去，执行 pod install 安装便可

Podfile文件

# Uncomment the next line to define a global platform for your project platform :ios, '9.0' # Uncomment the next line if you're using Swift or would like to use dynamic frameworks # use_frameworks! target 'iOSHybridRNDemo' do # Pods for iOSHybridRNDemo #***********************************************************************# # 'node_modules'目录通常位于根目录中 # 可是若是你的结构不一样，那你就要根据实际路径修改下面的`:path` pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'RCTText', 'RCTImage', 'RCTActionSheet', 'RCTGeolocation', 'RCTNetwork', 'RCTSettings', 'RCTVibration', 'BatchedBridge', 'RCTWebSocket', 'ART', 'RCTAnimation', 'RCTBlob', 'RCTCameraRoll', 'RCTPushNotification', 'RCTLinkingIOS', 'DevSupport' # 在这里继续添加你所须要的模块 ] # 若是你的RN版本 >= 0.42.0，请加入下面这行 pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga" #***********************************************************************# pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' end 

注意： #*************************# 中间的内容是咱们须要添加的RN依赖库，后面咱们全部pod 相关的命令，咱们都须要iOS根目录（有Podfile文件的目录）下执行

• 执行安装命令

$ pod install

image

在iOS原生页面填加RN页面入口

如今我就来实现从原生页面跳RN页面

• 使用RN提供一个View视图代码以下

NSURL * jsCodeLocation; #ifdef DEBUG NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"; jsCodeLocation = [NSURL URLWithString:strUrl]; #else jsCodeLocation = [CodePush bundleURL]; #endif NSDictionary *params = @{@"componentName":@"MeApp1", @"args":@{@"params":@"这是原生传递的参数"}}; RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"iOSRN" initialProperties:params launchOptions:nil]; self.view = rootView; 

修改RN入口文件 index.ios.js

修改RN页面的入口文件，这里当是iOS入口咱们修改index.ios.js文件，当Android入口，咱们修改index.android.js文件

• index.ios.js文件

import React, {Component} from 'react' import { Platform, StyleSheet, Text, View, AppRegistry } 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, }, }); AppRegistry.registerComponent('iOSHybridRNDemo', () => App) 

执行npm start 运行项目

到这里，咱们一个简单的原生嵌入RN开发工程就搭建完成了，咱们执行下面命令来运行项目，查看效果

• 开启node 服务

$ npm start

• 运行效果

image

福利时间

• 做者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM：欢迎小伙伴们 star
• 做者简书主页：包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5欢迎小伙伴们：多多关注，多多点赞
• 做者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也按期更新最新的RN学习资料给你们，谢谢你们支持！