使用Swift开发React Native组件（一）

使用Swift开发React Native组件（一）RN已经在圈子里流行很长一段时间了，网上相关的文章和介绍也很多，笔者很早之前也接触过一段时间，但也仅仅只是浅尝即止，这次正好有时间，所以准备深度学习一番，整体调研下来感觉如果只是仅仅学习React层面未免还是太浅薄，遇到很多问题无法从Native去找解决方案，理解上也有差距。IOS平台的RN是用OC编写的，可是OC的语法实在太难下口了，所以笔者选了Swift，但使用Swift的介绍在官网上仅仅只有一小段，民间资料也很少。经过一段时间的探索，几个基础场景已经被笔者攻克，遂将成果分享出来，希望能够帮助到大家，由于笔者也是第一次接触IOS开发，如果有问题还请斧正，谢谢。本系列所有案例都将集中在GitHub,以后有新的组件也将持续更新。

系列导航第一章-IOS开发基础入门第二章-TodoList案例讲解第三章-UI Components第四章-Native Module

本章内容介绍因为本系列的目标群体是和笔者一样有前端经验，IOS开发零经验的同学。所以本章讲的东西暂时和RN无关，主要介绍开发工具、学习资料等基础辅助型知识。

案例GitHubhttps://github.com/mtyang/React-native-Swift/tree/master/osSwift/

OC还要学吗个人感觉OC还是要学的，目前市场上很多组件还是以OC为主，有时候为了学习思路还是要看看别人的代码，但是不必像Swift一样深入，入门即可，介绍这篇文章 https://github.com/qinjx/30min_guides/blob/master/ios.md/

OC TO Swift这个工具是将OC代码翻译成Swift，我也是开了下脑洞google一下发现的，这非常有助于我们理解一些OC的代码。

在线翻译Xcode插件 插件非常好用，强烈推荐。

学习资料基础入门Apple 官方引导

中文视频，这套视频可以只看第一章，学习一些IOS开发的基本概念和工具介绍。

语法入门有中文PDF和英文原文档Swift入门 中文英文原档

UIkit这个类将是我们学习的重点，后面都将用它来构建我们的应用界面，介绍另外一本入门书籍这是一本弯弯同学写的，版本虽然是2.0，但是有xcode这种强大的编辑器会提醒你最新的语法是什么，除了一些关键字翻译的和我们的习惯不一致，其他都讲的不错。

Playground测试JS代码我们要么用node执行测试文件，要么直接在console中直接测试，在Xcode也提供了这样的场所，这在我们一边看文档一边学习时特别有帮助。

在项目中新建文件，选择Playground文件类型。

左边编码后右侧及时反馈代码执行结果，非常适合我们进行算法测试。

Hello worldStoryboard在IOS的世界中有两种构建界面的方式，一种编码方式，可以理解为在JS中用 document.createElement来创建HTML。另外一种Storyboard了，Storyboard是IOS开发很强大的一个功能，以至于笔者刚开始接触的时候也被震撼到了，心想这IOS开发也太简单了吧，就是一个拖字诀啊，但是在和我们ios的同学聊过之后才知道业内基本很少使用这个功能，从开发角度是很方便，但是从软件从来都是一个工程，我们需要不断的维护和升级，在复杂业务场景下使用编码构建界面。

界面介绍创建项目

根据上面的引导就完成了项目的创建，如果还想了解更多细节推荐看中文视频，接下来我们介绍下Xcode的工作界面

左侧为项目文件目录，中间就是Storyboard的工作台了，右下角则是UI列表。

两个 Storyboard注意看上图中左边文件中有两个Storyboard类型的文件。 LaunchScreen.storyboard是开启APP时的引导界面。 Main.storyboard是应用的内容界面。这两个文件也可以在下图的地方进行个配置。

Say hello我们选中 Main.storyboard这个文件，然后在右侧找到Label标签，并将它拖动到界面中，拖动过程中触摸板会有震动给你反馈，如下图。

接下来就很简单了，我们双击Label标签然后输入 Helloworld，在按下 cmd+R键，我们的第一个IOS程序就运行起来了。

提示： cmd+1、2、3、4、5键可以改变模拟器的尺寸，数字键是单选，如果你非要一起按我也没办法。

CocoaPods简介当我们开发应用时必定会用到第三方库，以前我们都是直接下载源文件到项目中，最后有了node和npm，生活质量瞬间提高了很多，那么在ios中，CocoaPods就是iOS最常用最有名的类库管理器了。

安装在终端中依次执行下面的命令

gem sources--remove https://rubygems.org/sudo gem install cocoapods

第一条命令是改变文件源，第二个则是cocoapods，等待一段时间后看见如下字样说明安装成功。

***CURRENT SOURCES***

注意：也有可能不是这个提醒，所以我们验证一下。

pod--version

如果出现版本号明细就说明我们已经安装成功了。

使用cocoapods的配置和我们npm稍有差异，不过也很简单，首先进入我们的项目执行命令。 pod initcocoapods会在目录中创建 Podfile文件，类似npm中的 package.json。

我们来看一下生成好的podfile文件。

# Uncomment this line to define a global platform for your project

# platform :ios, '9.0'

target 'iwtest'do

# Uncomment this line if you're using Swift or would like to use dynamic frameworks

# use_frameworks!

# Pods for iwtest

target 'iwtestTests'do

inherit!:search_paths

# Pods for testing

end

target 'iwtestUITests'do

inherit!:search_paths

# Pods for testing

end

end

现在我们要安装一个第三方的类库 SnapKit，这是它的github主页 https://github.com/SnapKit/SnapKit，这个类库是用来做布局的，在这里要表扬一下CSS，绝对是世界上最好的布局语言，没有之一，等我们后面学了IOS的布局方式后你就会深深理解我这句话的意思了。

编辑 podfile然后加入我们的需要的类库。

vimPodfile

# 定式部分

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

platform :ios,'10.0'

use_frameworks!

target 'testTodo'do

# 需要引入的类库写到这里

pod 'SnapKit','~> 3.2.0'

# Pods for testTodo

target 'testTodoTests'do

inherit!:search_paths

# Pods for testing

end

target 'testTodoUITests'do

inherit!:search_paths

# Pods for testing

end

end

退出编辑模式后执行命令进行安装 pod install

OK，如果不出问题我们就发现类库已经被安装了，这个时候还有一个小细节，我们如果使用了cocoapods来管理类库，它会帮我们在项目中创建一个 testTodo.xcworkspace启动文件，以后我们打开应用就要通过这个文件来打开了。

OC Swift 混编这一节就到了我们要讲的最重要的一节，众所周知RN是用OC编写的，那如何才能是用Swift来编写RN的组件呢，答案就是IOS原生就支持OC和Swift混编应用。

无论是在Swift的项目中新建OC文件还是在OC的项目中新建Swift文件，Xcode都会有下面的一个提示。

询问是否创建一个bridge文件，这个文件就是混编的关键，选择 Create之后会发现工程中多出了一个 project-iwtest-Bridging-Header.h的文件，project是你的工程名。

如上图，我在OC的项目中创建了一个 test.swift文件，并创建了一个bridge文件，这个文件什么意思呢，我们来看下文档介绍。

大概意思就是告诉我们，这个文件主要的功能是将OC的文件接口放在一起然后供Swift文件调用，红圈标注出来的意思是如果你想自己手动创建一个bridge文件也是可以的，但是需要做相应的配置。

在OC中调用Swift首先我们定义一个Swift类，定义一个sayHello函数，如果它被调用的话，控制台会打印出 Hello,Swift日志。

importFoundation

@objc(MySwift)

classMySwift:NSObject{

func sayHello(){

print("Hello, Swift")

}

}

然后我们编辑 ViewController.m 文件

#import "ViewController.h"

#import "iwtest-Swift.h"

@interfaceViewController()

@end

@implementationViewController

-(void)viewDidLoad {

[super viewDidLoad];

MySwift*mySwift =[[MySwift alloc] init];

[swiftObject log];

// Do any additional setup after loading the view, typically from a nib.

}

-(void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

先执行 cmd+b，发现没有报错，然后 cmd+r，一段时间后控制台准确无误打印出 Hello,Swift日志。

现在我们来解释一下这其中的关键，总共有两处。

Swift中的 @objc(MySwift) 这个关键字是Xode定义的，它在编译的时候将Swift文件也转换成OC文件，所以它最后才能以OC的代码格式执行。

OC文件中的 #import "iwtest-Swift.h"这个头文件也是Xcode自动创建的，它里面引用了所有你的工程中Swift文件，所以OC文件才能找到并引用。

在Swift中调用OC我们定义一个OC类，首先创建头文件 Myoc.h

#import <foundation/Foundation.h>

@interfaceMyoc:NSObject{}

+(void) sayHello;

@end

再创建实现文件 Myoc.m

#import <Foundation/Foundation.h>

#import "Myoc.h"

@implementationMyoc

+(void) sayHello {

NSLog(@"Hello, OC");

}

@end

同样的，我们创建了一个 sayHello函数，当这个函数执行的时候会打印一段日志 Hello,OC然后我们在刚才的Swift文件中调用这个函数。

func sayHello(){

print("Hello, Swift")

Myoc.sayHello()

}

如果一切正常的话控制台会先后打印 Hello,Swift和 Hello,OC，我们编译一下，结果报错了，根本找不到 Myoc这个类。 这个时候我们最开始创建的那个bridge文件就派上用场了。

#import "Myoc.h"

我们将头文件引入后再次编译发现没有报错，运行之后结果和预期相符。

结束语OC的一些语法确实很纠结，我后面后抽空把我理解到的，也是避不开的总结一下再编辑到这章里，希望对大家有用。