Swift开发React Native组件详解手机开发

前面说过,React Native作为一个全新的跨平台开发框架,好多东西还不是很成熟,很多原生的控件还不是很完善,于是好多爱好者便自己封装相关的组件,可以使用oc来封装,也可以使用Swift来封装。关于封装的原理,大家可以访问我的书的《React Native移动开发实战》

基础

学习本章知识,需要读者具备一定的OC和Swift语言基础,读者可以从下面的链接中获取学习资料。

Apple 官方引导
Xcode入门
Swift英文文档

UIKit

UIKit框架是iPhone应用程序开发中最基本的框架,也是用得最多、最重要的框架,UIKit包含界面相关操作组件集合,读者可以从官方文档中去学习具体的内容:UIKit框架官网

Playground

测试JS代码我们要么用node执行测试文件,要么直接在console中直接测试,在Xcode也提供了这样的场所。
1,在项目中新建文件,选择Playground文件类型。
这里写图片描述
左边编码后右侧及时反馈代码执行结果,非常适合我们进行算法测试。
这里写图片描述

Storyboard

在iOS的发展历程中,IOS开发经历了三种主要流派:使用代码手写UI及布局;使用单个xib文件组织viewController或者view;使用StoryBoard来通过单个或很少的几个文件构建全部UI。而在最近几年的开发中,苹果对 Storyboard 的开发力度也不断增强,添加了更多功能和特性,大大方便了界面的开发、适配以及提升代码性能。关于Storyboard更多知识的介绍,可以查看之前文章的介绍:StoryBoard入门

界面介绍

首先,新建一个xcode项目,如下图所示:
这里写图片描述
左侧为项目文件目录,中间就是Storyboard的工作台了,右下角则是UI列表。注意看上图中左边文件中有两个Storyboard类型的文件。LaunchScreen.storyboard是开启APP时的引导界面。Main.storyboard是应用的内容界面。这两个文件也可以在下图的地方进行个配置。
这里写图片描述

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

CocoaPods

什么是CocoaPods?每种语言发展到一个阶段,就会出现相应的依赖管理工具。好比Java 语言的 Maven,nodejs 的 npm,Android的grandle。而对于ios平台来说,CocoaPods是ios开发平台一个非常流行的第三方库管理工具。在开发过程中,根据项目复杂程度,通常我们会需要外链很多的第三方库。而添加这些第三方库的过程有时候会变成一场灾难。因此使用CocoaPods来代替我们管理这些库,将可以大幅缩短我们的开发时间。

安装

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

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,这个类库是用来做布局的。编辑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

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文件也是可以的,但是需要做相应的配置。可以查看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日志。如下图所示。
这里写图片描述
在OC中调用Swift时,应注意两点:

  1. Swift中的 @objc(MySwift)这个关键字是Xode定义的,它在编译的时候将Swift文件也转换成OC文件,所以它最后才能以OC的代码格式执行。
  2. OC文件中的 #import “iwtest-Swift.h”这个头文件也是Xcode自动创建的,它里面引用了所有你的工程中Swift文件,所以OC文件才能找到并引用。

在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"

这样就完成了混编调用,运行后结果如下:
这里写图片描述

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/tech/app/5926.html

(0)
上一篇 2021年7月17日 00:23
下一篇 2021年7月17日 00:23

相关推荐

发表回复

登录后才能评论