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开发相关的技术文章欢迎小伙伴们：多多关注，多多点赞
• 作者react native qq技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到rn相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的rn学习资料给大家，谢谢大家支持！