iOS原生混合RN開發最佳實踐

時間  2019-11-30
標籤 ios 原生 混合 開發 最佳 實踐 欄目 iOS 简体版
原文   原文鏈接

作過原生iOS開發或者Android開發的同窗們確定也都瞭解Hybrid，有一些Hybrid的開發經驗，目前咱們企業開發中運用最普遍的Hybrid App技術就是原生與H5 hybrid，在早期的時候，可能部分同窗也接觸過PhoneGap等hybrid技術，今天咱們就簡單來聊下一種比較新的Hybrid技術方案，原生App與ReactNativie Hybrid，若是有同窗們對React Native技術不熟悉的同窗，能夠查看做者簡書中對React Native基礎的講解：React Native入門到實戰講解node

示例Demo地址

image

具體步驟

  • 建立一個iOS原生項目
  • 將iOS原生項目支持pod
  • 調整目前項目工程的文件夾結構
  • 添加RN依賴相關文件
  • 安裝React Native
  • 修改Podfile文件，原生安裝React Native依賴庫
  • 在iOS原生頁面填加RN頁面入口
  • 修改RN入口文件 index.ios.js
  • 執行npm start 運行項目

建立一個iOS原生項目

使用Xcode建立一個空的項目，這個應該不用多說了react

image

項目支持pod

這一操做步驟一樣也很簡單，咱們只須要執行下面的幾條命令便可，若是對cocoapods 安裝使用不熟悉的同窗請參照做者簡書android

  • 建立podfile文件，咱們在有xcodeproj文件的同級目錄下執行下面命令，這時咱們的項目文件中就多了一個Podfile文件
$ pod init
複製代碼
  • 執行pod install 命令來安裝pod，一樣，這個命令也是在有xcodeproj同級目錄下，安裝完成後，咱們的項目多了一個
$ pod install
複製代碼

image

image

注意： 這裏對原生iOS不熟悉的同窗們須要注意了，當咱們使用pod來做爲庫管理工具，後面咱們打開項目運行，咱們就須要打開上圖所示的xcworkspace文件了ios

調整目前項目工程的文件夾結構

這裏對文件夾作結構調整是爲了後期更好的將Android原始項目也使用RN Hybrid，使iOS和Android共享一份React Native框架，共享同一份JS文件，調整的後的文件夾結構以下git

image

添加RN依賴相關文件

到這裏，咱們原生的iOS項目目錄結構已近調整完畢，後面咱們須要處理的都是RN相關的內容了，這裏須要建立的文件有點多，你們能夠直接將示例Demo中的這幾個文件直接拖到本身的項目中，而後在作修改便可github

  • 首先咱們須要建立package.json文件
  • 建立index.ios.js文件
  • 建立index.android.js文件
  • 建立bundle文件夾，注意這個文件夾是後面咱們接入CodePush熱更新時使用的

安裝React Native

安裝React Native這個也很簡單，咱們也是簡單的執行下面的命令便可，注意：執行npm 系列的命令，咱們都須要在項目根目錄（有package.json文件的目錄）下執行npm

$ npm install
複製代碼

package.json文件內容以下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 命令來安裝原生依賴redux

$ react-native link react-native-vector-icons
複製代碼

image

當咱們執行完npm install 命令以後，咱們再打開項目目錄，發現多了一個 node_modules 文件夾，這個文件夾就是咱們安裝的React Native全部的依賴庫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地址(按照企業開發標準搭建框架完成開發的)：github.com/guangqiang-…：歡迎小夥伴們 star
  • 做者簡書主頁：包含60多篇RN開發相關的技術文章www.jianshu.com/u/023338566… 歡迎小夥伴們：多多關注，多多點贊
  • 做者React Native QQ技術交流羣：620792950 歡迎小夥伴進羣交流學習
  • 友情提示：在開發中有遇到RN相關的技術問題，歡迎小夥伴加入交流羣（620792950），在羣裏提問、互相交流學習。交流羣也按期更新最新的RN學習資料給你們，謝謝你們支持！
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程