×

含泪导入React-native 0.54到Swift原生项目

96
莫寂岚
2018.04.11 16:37* 字数 1456

照着官方文档撸,撸出了一连串的坑[泪奔中ing],但是不要紧,最终还是弄出了一个结构。
先上效果图:

第一个Tab是导入的RN页面,后两个是原生。

合成效果图.gif

友情提示:如果你弄过集成到原生项目或者对RN 开发和原生开发比较熟悉,那么,请直接往下看。如果你是第一次弄,并且对RN不是很熟悉,那请你移步到官方的教程,链接如下:
Facebook官方:https://facebook.github.io/react-native/docs/integration-with-existing-apps.html
React-native中文网:https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content

将react-native集成到现有的原生应用是一个非常有价值的做法。
主要由以下几个步骤:
1、创建一个原生项目。
2、创建react-native相关目录和文件。
3、创建Podfile,用cocoaPods管理react-native依赖。(这一步巨坑,坑到不能呼吸)。
4、添加Swift项目加载react-native页面的方法。
5、运行并调试。


创建Swift项目

在这一步,就是正常的创建我们的swift项目。然后根据我们的需求,搭建正常的项目框架。
这里只需要理解一个概念:

(敲黑板划重点了!!!!)

RN在原生端显示的东西,是绘制在一个继承自UIView的View视图上的,其类别为RCTRootView

基于这个概念,我们可以在原生项目中去组织我们的页面关系,路由逻辑了。

创建react-native相关目录和文件

在这一步,我们的主要目的是搭建React-native相关的开发环境。
切记:不哟啊用react-native命令去直接生成项目,会很蛋疼。

1)新建package.json文件

{
  "name": "就不告诉你们了,复制党不哟啊手抖哦",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "postinstall": "sed -i '' 's/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/#import <React\\/RCTValueAnimatedNode.h>/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h; sed -i '' 's/#import <fishhook\\/fishhook.h>/#import <React\\/fishhook.h>/' ./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m"
  },
  "dependencies": {
    "mobx": "^4.1.1",
    "mobx-react": "^5.0.0",
    "prop-types": "^15.6.1",
    "react": "^16.3.1",
    "react-native": "0.54.0"
  },
  "devDependencies": {
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.3",
    "react-test-renderer": "^16.3.0-alpha.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

这里注意一个问题,正常的RN项目中,在这个位置:


image.png

是没有podstinall这一行,这一行主要是为了解决(截图来自网络):


RCTWebSocket报错的问题.jpg

这个问题,而修改的。
当然,我们也可以按照facebooke的issue链接去解决问题,但是,在RCTAnimation中会遇到其他的问题。
所以呢,我暂时就采用这个解决方案了。
接着,只需要执行

yarn

命令,生成node_modules文件夹就可以了。
接下来,就是pod集成React-native的时候了。

配置CocoaPods依赖

React-native是由node模块安装到项目中的。利用静态库拖拽,自行link项目的方式也可以去加入到原生项目。但是在这里有个坑不太好填,就是在手动link的静态库中引入了一些三方开源项目,而我们的工程在之前同样也引入了同样的三方开源项目,会有冲突。
所以在这里采用cocoapods的方式去整合依赖。
引用一段中文网的描述

在你开始把React Native集成到你的应用中之前,首先要决定具体整合的是React Native框架中的哪些部分。而这就是subspec要做的工作。在创建Podfile文件的时候,需要指定具体安装哪些React Native的依赖库。所指定的每一个库就称为一个subspec

可用的subspec都列在node_modules/react-native/React.podspec中,基本都是按其功能命名的。一般来说你首先需要添加Core,这一subspec包含了必须的AppRegistryStyleSheetView以及其他的一些React Native核心库。如果你想使用React Native的Text库(即<Text>组件),那就需要添加RCTTextsubspec。同理,Image需要加入RCTImage,等等。

理解这段话非常重要,涉及到我们在react-native中添加一些包含原生模块的功能的第三方的时候,会去更新podfile。
首先,在iOS的根目录下使用cocoaPods的名利

$ pod init

然后会生成一个PodFile的文件。
首先我们按照官方的文档,把Podfile文件修改为如下内容:

source 'https://github.com/CocoaPods/Specs.git'

# 对于Swift应用来说下面两句是必须的
platform :ios, '8.0'
use_frameworks!

# target的名字一般与你的项目名字相同
target 'swift-2048' do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.45则加入此行
    'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的RN模块
  ]
  # 如果你的RN版本 >= 0.42.0,请加入下面这行
  pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

   # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

紧接着,可以执行pod install。
按照常理而言,这里就OK了。但是,我发现自己还是图样图森破。
安装之后,报各种错:

类型一:

[DF67E492FA2F101226DED5E41BE6AB45.png-2f51e8-1523427828542-0)]

DF67E492FA2F101226DED5E41BE6AB45.png

类型二:

错误图片
8vRym.png
AzPNM (1).png

遇到过上面的错误的同学,可以扣波111111了。
先上个外部资料参考一下:https://stackoverflow.com/questions/48705250/react-native-ios-could-not-build-module-yoga-algorithm-file-not-found
外部资料二:https://github.com/facebook/yoga/issues/711

上面这个链接是个有效的修改办法。
当然,按照官网的处理,在pod install的时候还会有些小错误,这个有开发经验的人都能搞定。

敲黑板:这里划重点了。

怎么处理上面的问题呢??
只要把这段代码加入到Podfile里面即可:(注意是最底部)

def fix_cplusplus_header_compiler_error
    filepath = '../node_modules/react-native/React/Base/Surface/SurfaceHostingView/RCTSurfaceSizeMeasureMode.h'

    contents = []

    file = File.open(filepath, 'r')
    file.each_line do | line |
        contents << line
    end
    file.close

    if contents[32].include? "&"
        contents.insert(26, "#ifdef __cplusplus")
        contents[36] = "#endif"

        file = File.open(filepath, 'w') do |f|
            f.puts(contents)
        end
    end
end

def fix_unused_yoga_headers
    filepath = './Pods/Target Support Files/yoga/yoga-umbrella.h'

    contents = []

    file = File.open(filepath, 'r')
    file.each_line do | line |
        contents << line
    end
    file.close

    if contents[12].include? "Utils.h"
        contents.delete_at(15) # #import "YGNode.h"
        contents.delete_at(15) # #import "YGNodePrint.h"
        contents.delete_at(15) # #import "Yoga-internal.h"
        contents.delete_at(12) # #import "Utils.h"

        file = File.open(filepath, 'w') do |f|
            f.puts(contents)
        end
    end
end

def react_native_fix
    fix_cplusplus_header_compiler_error
    fix_unused_yoga_headers
end

post_install do |installer|
    react_native_fix
end

接着找到node_modules/react-native/ReactCommon/yoga/yoga.podspec
这个文件,在文件底部结尾处(end上方)加入以下代码:

spec.public_header_files = 'yoga/Yoga.h', 'yoga/YGEnums.h', 'yoga/YGMacros.h'

接着,再进行pod update就可以愉快的build了。

接下来呢?我们就可以开始我们的项目布局了。
在下一篇文章中,我们来研究一下如何写一个Swift模块去和react-native通信,以及如何接入包含原生模块的第三方。

如果本文对你有帮助,请不吝打赏,请我喝杯咖啡也是可以的~~~

转载请注明出处!!

Web note ad 1