使用Swift开发React Native组件(一)

栏目: Swift · 发布时间: 7年前

内容简介:使用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无关,主要介绍开发 工具 、学习资料等基础辅助型知识。

案例GitHub

https://github.com/mtyang/Rea...

OC还要学吗

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

OC TO Swift

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

在线翻译

Xcode插件 插件非常好用,强烈推荐。

学习资料

基础入门

  1. Apple 官方引导

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

语法入门

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

UIkit

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

Playground

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

  1. 在项目中新建文件,选择Playground文件类型。

使用Swift开发React Native组件(一)

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

使用Swift开发React Native组件(一)

Hello world

Storyboard

在IOS的世界中有两种构建界面的方式,一种编码方式,可以理解为在JS中用 document.createElement 来创建HTML。

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

界面介绍

创建项目

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

使用Swift开发React Native组件(一)

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

两个 Storyboard

注意看上图中左边文件中有两个Storyboard类型的文件。

LaunchScreen.storyboard 是开启APP时的引导界面。

Main.storyboard 是应用的内容界面。

这两个文件也可以在下图的地方进行个配置。

使用Swift开发React Native组件(一)

Say hello

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

使用Swift开发React Native组件(一)

接下来就很简单了,我们双击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都会有下面的一个提示。

使用Swift开发React Native组件(一)

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

使用Swift开发React Native组件(一)

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

使用Swift开发React Native组件(一)

大概意思就是告诉我们,这个文件主要的功能是将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 日志。

使用Swift开发React Native组件(一)

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

@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, SwiftHello, OC ,我们编译一下,结果报错了,根本找不到 Myoc 这个类。 这个时候我们最开始创建的那个bridge文件就派上用场了。

#import "Myoc.h"

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

使用Swift开发React Native组件(一)

结束语

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


以上所述就是小编给大家介绍的《使用Swift开发React Native组件(一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Agile Web Development with Rails, Third Edition

Agile Web Development with Rails, Third Edition

Sam Ruby、Dave Thomas、David Heinemeier Hansson / Pragmatic Bookshelf / 2009-03-17 / USD 43.95

Rails just keeps on changing. Rails 2, released in 2008, brings hundreds of improvements, including new support for RESTful applications, new generator options, and so on. And, as importantly, we’ve a......一起来看看 《Agile Web Development with Rails, Third Edition》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具