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

作者: X先生_未知数的X | 来源:发表于2018-04-26 14:32 被阅读112次

iOS原生混合RN开发详解

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

示例Demo地址

[图片上传失败...(image-1be29a-1524724319090)]

具体步骤

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

创建一个iOS原生项目

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

[图片上传失败...(image-ee99a8-1524724319090)]

项目支持pod

这一操作步骤同样也很简单，我们只需要执行下面的几条命令即可，如果对cocoapods 安装使用不熟悉的同学请参照作者简书

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

$ pod init

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

$ pod install

[图片上传失败...(image-a99404-1524724319090)]

[图片上传失败...(image-d7df60-1524724319090)]

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

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

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

[图片上传失败...(image-569958-1524724319090)]

添加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-6e86c6-1524724319090)]

当我们执行完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-64ef15-1524724319090)]

在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-eaeded-1524724319090)]

福利时间

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

作者：光强_上海
链接：https://www.jianshu.com/p/f9812f601a2c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

网友评论

本文标题：iOS原生混合RN开发最佳实践

本文链接：https://www.haomeiwen.com/subject/gooplftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

iOS原生混合RN开发详解

示例Demo地址

具体步骤

创建一个iOS原生项目

项目支持pod

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

添加RN依赖相关文件

安装React Native

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

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

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

执行`npm start` 运行项目

福利时间

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

iOS原生混合RN开发详解

示例Demo地址

具体步骤

创建一个iOS原生项目

项目支持pod

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

添加RN依赖相关文件

安装React Native

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

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

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

执行npm start 运行项目

福利时间

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

执行`npm start` 运行项目