ReactNative工程搭建和改造

栏目: IOS · 发布时间: 4年前

内容简介:两种教程里都提到2种方式:沙盒方式(expo)、与原生混合(Native Code),他们的区别在于是否会编写原生代码。expo方式中集成了部分原生的功能,直接引用expo sdk即可。也可使用考虑到国内对APP的要求,如个性化、性能要求等等,还是选择与原生混合方式较好,方便后期扩展。

官方教程 ,中文教程。网上也有很多其他资料,可自行搜索。

两种教程里都提到2种方式:沙盒方式(expo)、与原生混合(Native Code),他们的区别在于是否会编写原生代码。expo方式中集成了部分原生的功能,直接引用expo sdk即可。也可使用 yarn ejected 根据提示对工程进行转原生混合方式,应该不能逆转吧。

考虑到国内对APP的要求,如个性化、性能要求等等,还是选择与原生混合方式较好,方便后期扩展。

下面以 iOS 为例,记录下我的改造过程:

一、工程构建

1、工程目录构建

$ yarn global add react-native-cli
$ react-native init doctor_app
$ cd doctor_app
$ yarn install	// 此步可能在init时已经自动执行过了
复制代码

2、iOS添加pod支持

$ cd ios
$ pod init
$ vim Podfile	// 更改platform为9.0,可以移除其他未用的target
$ pod install
复制代码

双击打开生成的doctor_app.xcworkspace后,会在doctor_app工程中的Libraries看到React的默认支持。这时iOS工程项目已经初步完成。如果需要添加原生支持的RN三方依赖,以 react-native-device-info 为例

$ yarn add react-native-device-info
$ react-native link react-native-device-info	// 推荐用link自动方式,也有其他多种方式,按照库的问题操作即可
$ cd ios
$ pod install
复制代码

最后,就可以在RN代码里react-native-device-info的API,编译后APP能正常运行。

二、[!] React has been deprecated

在上面 pod install 之后可能会注意到控制台有黄色的提示 [!] React has been deprecated ,同时发现pod过程中安装 React 0.11.0 ,但明明package.json里使用的 "react-native": "0.59.8"

有强迫症的表示不能接受,哈哈…..如果此时通过pod方式安装 code-push ,编译还会报错 React/RCTEventEmitter.h file not found in CodePush.h ,此问题在code-push的issues上有提到很多次。是不是很尴尬!明明装了RN,而且还安装了两个版本。

大致原因就是头文件引用的问题。下面用白话简单阐述,虽说工程构建时添加了 RN版本A ,走的Library形式,但是用pod安装的RN依赖并不能准确找到 RN版本A 的头文件,导致会自动安装一个 RN版本B(即0.11.0) 。这时用pod方式安装的code-push会自动首先找到 RN版本B ,报上面的错误也能理解,毕竟code-push发布时依赖RN版本最低要求0.xx.x(仅是我猜测,未验证!)。

解决方式就是将Library里的RN版本A移到Podfile里。

三、转移React Native到Podfile

即把下面这些Library转移到Podfile里去,这时有没有想起什么?转移原理其实是集成到现有原生应用,只不过转移后还保留了react-native-cli脚手架在Xcode中的配置,比如打包RN代码的脚本等。一般情况下将RN集成到现有原生APP里,在打包APP时需要首先打包RN的离线文件,更详细见 React Native iOS打包详解

ReactNative工程搭建和改造

在Podfile里添加下面的代码,然后pod install即可会安装两个RN版本的问题。

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    'RCTWebSocket',
    'RCTAnimation',
    'RCTLinkingIOS',
    'RCTSettings',
    'RCTGeolocation',
    'RCTActionSheet',
    'RCTVibration',
    'RCTBlob',
  ]
    
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  
  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'
复制代码

为了保险起见,将上述截图里的RN子模块全部移除掉 Remove Reference ,不是 Move to Trash 。接着用Xcode编译试试APP看能不能正常运行。

到此,RN工程的基本改造完成,尽情使用Podfile安装RN第三方原生依赖吧。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从问题到程序

从问题到程序

裘宗燕 / 机械工业出版社 / 2011-5 / 39.00元

《从问题到程序:程序设计与C语言引论(第2版)》以C作为工具语言,讨论了基本程序设计的各方面内容,详细解释了与c语言和程序设计有关的问题。在新版中,特别加强了针对近年日益受到业界和学术界广泛重视的问题的讨论,并通过详细地分析和讨论大量符合C99标准的实例,给出了分析和分解问题、找出解决问题的主要步骤、确定函数抽象、找出循环、选择语言结构直至最后做出所需程序的完整过程。 《从问题到程序:程序设......一起来看看 《从问题到程序》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具