系列文章目录
- React-Native环境搭建(IOS)
- React-Native项目 — 关于IOS知识储备
- React-Native项目工程搭建(开发模板搭建)
- React-Native项目矢量图标库(react-native-vector-icons)
- React-Native项目 — 自定义字体的使用
目录
前言
React-Native项目开发,其实并不是仅仅知道前端的知识,就能把App做好,在某些场景中,我们不得不了解一部分 Ios 相关的知识,比如 Js 与 Native 交互场景,又比如Ios集成微信、支付宝等第三方功能时,我们不得不对react-native项目进行改造。
想要实现这些目标,个人觉得就需要提前了解一些 Ios 的基本知识,比如 Cocoapods、比如 object-c 语法、比如Xcode编辑器等等。
一、Podfile 文件认知
Podfile 是 ios 开发,描述项目依赖规则的一个描述性文件。
Podfile文件,类似前端的 package.json 文件,记录了该项目,依赖那些三方库。
1,Podfile vs package.json
了解Podfile,就不得不了解,CocoaPods,其官网地址:https://guides.cocoapods.org/using/getting-started.html
那CocoaPods是什么呢?你可以把它理解为一个包管理器,就像node中有很多的前端需要的包一样。
Podfile的初始化生成,一般可以通过 pod init 命令。就像package.json文件的生成,直接通过 npm init 一样。
理解package.json文件,有助于我们理解前端项目,让我们能够了解前端项目的启动命令,依赖三方库等等。
那理解Podfile文件,有助于我们理解IOS项目,让我们能够了解IOS项目开发的基础依赖库,项目编译打包规则等等。
2,Podfile配置示例
个人认为,作为 React-Native开发者,主要了解Podfile中的target 以及 pod关键字,一个简单的配置教程示例如下:
# 全局配置,
install! 'cocoapods',
:deterministic_uuids => true, # 创建Pods项目时,是否生成确定的UUID。默认值:true
:integrate_targets => true # 是否把已经安装好的Pods集成到用户的项目中。默认值:true
# 平台申明、版本
platform :ios, '9.0'
# 针对引入库的所有警告,都忽视掉
inhibit_all_warnings!
# 针对MyApp这个target,引入ObjectiveSugar
target 'MyApp' do
pod 'ObjectiveSugar', '~> 0.5'
# 针对MyAppTests这个target,继承了MyApp的ObjectiveSugar,以及自己引入了OCMock
target 'MyAppTests' do
# 继承模式(search_paths、complate、none)
inherit! :search_paths
pod 'OCMock', '~> 2.0.1'
end
end
# 每一个target申明完成之后,都以end结束。
# Podfile中的hooks(pre_install、pre_integrate、post_install、post_integrate)
post_install do |installer|
installer.pods_project.targets.each do |target|
puts "#{target.name}"
end
end
二、简单的IOS语法知识
React-Native项目中,IOS代码部分,主要是使用object-c语法,语法的表现上,代码块就分为两部分,一部分是申明文件,一部分是实现文件。申明文件是以 .h 为结尾的文件,实现文件是以 .m 为结尾的文件。
了解ios语法的业务目的,我觉得有两个:
1,实现react-native 中,js与ios之间的通信。
2,针对第三方能力的对接。例如:微信开放平台能力,支付宝支付能力等等。
1,react-native中的文件说明
a,AppDelegate.h文件
#import <RCTAppDelegate.h>
#import <UIKit/UIKit.h>
#import <WXApi.h>
@interface AppDelegate : RCTAppDelegate<WXApiDelegate>
@end
首先,关于 .h 文件,它是一个申明文件,在AppDelegate中,import 关键字,是用于引入第三方库的,我们可以看到,在这里主要引入了三个库:RCTAppDelegate、UIKit、WXApi
- RCTAppDelegate,是react-native中,为了实现同ios的交互、通知等功能,而实现的一个类。
- UIKit,是基于ios的一个页面视图框架。
- WXApi,微信sdk中,对于微信分享、支付等一系列功能的封装。
interface关键字,用于申明一个接口 - AppDelegate。
b,AppDelegate.m文件
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
@implementation AppDelegate
@end
关于 .h 文件,是对某个类的实现文件,所以必须引入其头文件 AppDelegate.h。
implementation关键字,就是说明,该文件需要对头文件中的定义,就行实现。
三、其他关键知识
react-native开发,ios部分的编译,其实还是依靠xcode编辑器,而且在某些集成第三方库的时候,也离不开xcode。针对xcode,我们必须了解微信sdk如何在xcode中配置。xcode 如何引用第三方库等等。
ios项目的开发,离不开Apple开发者账号,因为我们的app,总要发布到App store中,想要发布到appstore,就必须有Apple开发者账号。