RN 已经在圈子里流行很长一段时间了,网上相关的文章和介绍也很多,笔者很早之前也接触过一段时间,但也仅仅只是浅尝即止,这次正好有时间,所以准备深度学习一番,整体调研下来感觉如果只是仅仅学习 React 层面未免还是太浅薄,遇到很多问题无法从 Native 去找解决方案,理解上也有差距。
IOS 平台的 RN 是用 OC 编写的,可是 OC 的语法实在太难下口了,所以笔者选了 Swift,但使用 Swift 的介绍在官网上仅仅只有一小段,民间资料也很少。
经过一段时间的探索,几个基础场景已经被笔者攻克,遂将成果分享出来,希望能够帮助到大家,由于笔者也是第一次接触 IOS 开发,如果有问题还请斧正,谢谢。
本系列所有案例都将集中在 GitHub , 以后有新的组件也将持续更新。
第一章 - IOS 开发基础入门
[第二章 - TodoList 案例讲解]()
[第三章 - UI Components]()
[第四章 - Native Module]()
因为本系列的目标群体是和笔者一样有前端经验,IOS 开发零经验的同学。所以本章讲的东西暂时和 RN 无关,主要介绍开发工具、学习资料等基础辅助型知识。
https://github.com/mtyang/Rea...
个人感觉 OC 还是要学的,目前市场上很多组件还是以 OC 为主,有时候为了学习思路还是要看看别人的代码,但是不必像 Swift 一样深入,入门即可,介绍这篇文章 https://github.com/qinjx/30mi...
这个工具是将 OC 代码翻译成 Swift,我也是开了下脑洞 google 一下发现的,这非常有助于我们理解一些 OC 的代码。
在线翻译
Xcode 插件 插件非常好用,强烈推荐。
有中文 PDF 和英文原文档 Swift 入门 中文 英文原档
这个类将是我们学习的重点,后面都将用它来构建我们的应用界面,介绍 另外一本入门书籍 这是一本弯弯同学写的,版本虽然是 2.0,但是有 xcode 这种强大的编辑器会提醒你最新的语法是什么,除了一些关键字翻译的和我们的习惯不一致,其他都讲的不错。
测试 JS 代码我们要么用 node 执行测试文件,要么直接在 console 中直接测试,在 Xcode 也提供了这样的场所,这在我们一边看文档一边学习时特别有帮助。
在 IOS 的世界中有两种构建界面的方式,一种编码方式,可以理解为在 JS 中用
来创建 html。
- document.createElement
另外一种 Storyboard 了,Storyboard 是 IOS 开发很强大的一个功能,以至于笔者刚开始接触的时候也被震撼到了,心想这 IOS 开发也太简单了吧,就是一个拖字诀啊,但是在和我们 ios 的同学聊过之后才知道业内基本很少使用这个功能,从开发角度是很方便,但是从软件从来都是一个工程,我们需要不断的维护和升级,在复杂业务场景下使用编码构建界面。
创建项目
根据上面的引导就完成了项目的创建,如果还想了解更多细节推荐看中文视频,接下来我们介绍下 Xcode 的工作界面
左侧为项目文件目录,中间就是 Storyboard 的工作台了,右下角则是 UI 列表。
注意看上图中左边文件中有两个 Storyboard 类型的文件。
是开启 APP 时的引导界面。
- LaunchScreen.storyboard
是应用的内容界面。
- Main.storyboard
这两个文件也可以在下图的地方进行个配置。
我们选中
这个文件,然后在右侧找到 Label 标签,并将它拖动到界面中,拖动过程中触摸板会有震动给你反馈,如下图。
- Main.storyboard
接下来就很简单了,我们双击 Label 标签然后输入
,在按下
- Hello world
键,我们的第一个 IOS 程序就运行起来了。
- cmd + R
提示:
键可以改变模拟器的尺寸,数字键是单选,如果你非要一起按我也没办法。
- cmd + 1、2、3、4、5
当我们开发应用时必定会用到第三方库,以前我们都是直接下载源文件到项目中,最后有了 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 会在目录中创建
文件,类似 npm 中的
- Podfile
。
- 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'
现在我们要安装一个第三方的类库
,这是它的 github 主页
- SnapKit
,这个类库是用来做布局的,在这里要表扬一下 CSS,绝对是世界上最好的布局语言,没有之一,等我们后面学了 IOS 的布局方式后你就会深深理解我这句话的意思了。
- https://github.com/SnapKit/SnapKit
编辑
然后加入我们的需要的类库。
- 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
这一节就到了我们要讲的最重要的一节,众所周知 RN 是用 OC 编写的,那如何才能是用 Swift 来编写 RN 的组件呢,答案就是 IOS 原生就支持 OC 和 Swift 混编应用。
无论是在 Swift 的项目中新建 OC 文件还是在 OC 的项目中新建 Swift 文件,Xcode 都会有下面的一个提示。
询问是否创建一个 bridge 文件,这个文件就是混编的关键,选择 Create 之后会发现工程中多出了一个
的文件,project 是你的工程名。
- project-iwtest-Bridging-Header.h
如上图,我在 OC 的项目中创建了一个
文件,并创建了一个 bridge 文件,这个文件什么意思呢,我们来看下 文档介绍 。
- test.swift
大概意思就是告诉我们,这个文件主要的功能是将 OC 的文件接口放在一起然后供 Swift 文件调用,红圈标注出来的意思是如果你想自己手动创建一个 bridge 文件也是可以的,但是需要做相应的配置。
首先我们定义一个 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"
我们定义一个 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
然后我们在刚才的 Swift 文件中调用这个函数。
- Hello, OC
- func sayHello(){
- print("Hello, Swift")
- Myoc.sayHello()
- }
如果一切正常的话控制台会先后打印
和
- Hello, Swift
,我们编译一下,结果报错了,根本找不到
- Hello, OC
这个类。 这个时候我们最开始创建的那个 bridge 文件就派上用场了。
- Myoc
- #import "Myoc.h"
我们将头文件引入后再次编译发现没有报错,运行之后结果和预期相符。
OC 的一些语法确实很纠结,我后面后抽空把我理解到的,也是避不开的总结一下再编辑到这章里,希望对大家有用。
来源: http://www.tuicool.com/articles/aaYFFrB