内容简介:使用Swift开发React Native组件(一)
使用Swift开发React Native组件(一)
RN已经在圈子里流行很长一段时间了,网上相关的文章和介绍也很多,笔者很早之前也接触过一段时间,但也仅仅只是浅尝即止,这次正好有时间,所以准备深度学习一番,整体调研下来感觉如果只是仅仅学习React层面未免还是太浅薄,遇到很多问题无法从Native去找解决方案,理解上也有差距。
IOS平台的RN是用OC编写的,可是OC的语法实在太难下口了,所以笔者选了Swift,但使用Swift的介绍在官网上仅仅只有一小段,民间资料也很少。
经过一段时间的探索,几个基础场景已经被笔者攻克,遂将成果分享出来,希望能够帮助到大家,由于笔者也是第一次接触IOS开发,如果有问题还请斧正,谢谢。
本系列所有案例都将集中在 GitHub ,以后有新的组件也将持续更新。
系列导航
[第二章-TodoList案例讲解]()
[第三章-UI Components]()
[第四章-Native Module]()
本章内容介绍
因为本系列的目标群体是和笔者一样有前端经验,IOS开发零经验的同学。所以本章讲的东西暂时和RN无关,主要介绍开发 工具 、学习资料等基础辅助型知识。
案例GitHub
https://github.com/mtyang/Rea...
OC还要学吗
个人感觉OC还是要学的,目前市场上很多组件还是以OC为主,有时候为了学习思路还是要看看别人的代码,但是不必像Swift一样深入,入门即可,介绍这篇文章 https://github.com/qinjx/30mi...
OC TO Swift
这个工具是将OC代码翻译成Swift,我也是开了下脑洞google一下发现的,这非常有助于我们理解一些OC的代码。
Xcode插件 插件非常好用,强烈推荐。
学习资料
基础入门
-
中文视频 ,这套视频可以只看第一章,学习一些IOS开发的基本概念和工具介绍。
语法入门
有中文PDF和英文原文档 Swift入门 中文 英文原档
UIkit
这个类将是我们学习的重点,后面都将用它来构建我们的应用界面,介绍 另外一本入门书籍 这是一本弯弯同学写的,版本虽然是2.0,但是有xcode这种强大的编辑器会提醒你最新的语法是什么,除了一些关键字翻译的和我们的习惯不一致,其他都讲的不错。
Playground
测试JS代码我们要么用node执行测试文件,要么直接在console中直接测试,在Xcode也提供了这样的场所,这在我们一边看文档一边学习时特别有帮助。
-
在项目中新建文件,选择Playground文件类型。
-
左边编码后右侧及时反馈代码执行结果,非常适合我们进行算法测试。
Hello world
Storyboard
在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标签然后输入 Hello world
,在按下 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 init
cocoapods会在目录中创建 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
然后加入我们的需要的类库。
vim Podfile
# 定式部分 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
日志。
import Foundation @objc(MySwift) class MySwift:NSObject { func sayHello(){ print("Hello, Swift") } }
然后我们编辑 ViewController.m
文件
#import "ViewController.h" #import "iwtest-Swift.h" @interface ViewController () @end @implementation ViewController - (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
日志。
现在我们来解释一下这其中的关键,总共有两处。
@objc(MySwift) #import "iwtest-Swift.h"
在Swift中调用OC
我们定义一个OC类,首先创建头文件 Myoc.h
#import <foundation/Foundation.h> @interface Myoc : NSObject {} + (void) sayHello; @end
再创建实现文件 Myoc.m
#import <Foundation/Foundation.h> #import "Myoc.h" @implementation Myoc +(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的一些语法确实很纠结,我后面后抽空把我理解到的,也是避不开的总结一下再编辑到这章里,希望对大家有用。
以上所述就是小编给大家介绍的《使用Swift开发React Native组件(一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Container容器组件的使用
- 使用storybook管理React组件
- Khala路由组件介绍与使用
- react-组件类型及使用场景
- 使用Docker运行整套项目组件
- 使用storybook搭建私有组件库
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。