前面说过,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"

这样就完成了混编调用,运行后结果如下:

Swift开发React Native组件的更多相关文章

  1. ios – 在新的Storyboard中将值传递给UIViewController – Swift

    我试图将值传递给新的视图控制器–位于新的故事板文件中.但是当我这样做时,我从NewViewController得到的结果总是为零.下面是我在新故事板中显示视图控制器的方法:我尝试在这里发送信息:然后呈现视图控制器.这是我的NewViewController,我尝试接收值.但最终仍然是零.我错误地发送了这些值吗?解决方法您正在使用此行创建NewViewController的新实例而是将变量和委托分配给已从StoryBoard实例化的vc

  2. ios – 将UIViewController视图属性设置为不带有storyboard / nib的自定义UIView类

    或者上面的代码片段是推荐的吗?

  3. ios – Xcode Storyboard中“推断”和“自由形式”有什么区别?

    我有一个自定义视图,需要在所有iPhone设备上显示.在创建自定义视图XIB时,我将其称为“推断”,但它没有为iPhone6和iPhone6Plus设备调整大小.我无法弄清楚这个问题.我对“推断”和“自由形式”之间的实际差异感到困惑.有人可以解释一下这些差异吗?

  4. 在ios中将故事板从一个应用程序复制到另一个应用程序的最佳方法是什么?

    或者我在这里遗漏了什么?编辑-1我认为StoryBoard的布局大小仅限于iphone5.解决方法你这样做的方式是正确的.您只是遇到了布局约束不存在或错误的事实.关于故事板没有什么神奇之处……它只是一个像你复制到你的新项目中的任何其他文件.您应该在每个视图控制器中选择您的顶层视图,然后告诉Xcode删除所有约束并将它们重置为建议的约束,然后从那里开始.

  5. ios – Interface Builder无法确定“Main.storyboard”的类型.这可能是由于缺少SDK

    解决方法这没有你想象的那么复杂.该错误是因为您在Main.storyboard的源代码上输错了一些内容,例如我不小心在Main.storyboard的第一个打开标记之前放了一个“”.1)你必须做的是删除Main.storyboard2)转到垃圾箱,将Main.storyboard移动到桌面,用任何文本编辑器打开并修复代码;然后“全选”和“复制”.3)在Xcode上,创建一个全新的Main.storyboard,然后按右键单击文件并选择OpenAs–>源代码,然后粘贴您在剪贴板上的固定代码.4)右键单击文件

  6. ios – React native链接到另一个应用程序

    如果是错误的,有人知道如何调用正确的吗?

  7. 使用Xcode 6中的Storyboard的AppDelegate for Cocoa应用程序

    我有一个现有的OSX应用程序,在转换为Storyboards作为主界面后,我的app代理不再被使用.之前,MainMenu.xib有一个“AppDelegate”对象,我可以将它的类设置为我的appdelegate.但是,Storyboard不包含此类对象.如何恢复AppDelegate并保留故事板?

  8. ios – 无法识别的选择器发送到实例NSTimer Swift

    解决方法让updateTime成为一个类方法.如果它是在一个纯粹的Swift类中,你需要在@objc前面说明该方法的声明,如:

  9. ios – storyboard在导入xcassets后为每个图像都有问号

    图片.这是在我将所有媒体资产导入新的.xcassets结构后发生的.该应用程序运行正常,图像显示应用程序运行时,但我该怎么做才能在故事板中恢复它们?解决方法从故事板中的图像名称中删除.png扩展名.Xcode5现在使用图像名称,而不是文件名.

  10. cocoapods – 命令/ bin / sh失败,退出代码23

    适用于所有豆荚,无需豆荚但仍然是同样的错误.有任何想法吗?

随机推荐

  1. Swift UITextField,UITextView,UISegmentedControl,UISwitch

    下面我们通过一个demo来简单的实现下这些控件的功能.首先,我们拖将这几个控件拖到storyboard,并关联上相应的属性和动作.如图:关联上属性和动作后,看看实现的代码:

  2. swift UISlider,UIStepper

    我们用两个label来显示slider和stepper的值.再用张图片来显示改变stepper值的效果.首先,这三个控件需要全局变量声明如下然后,我们对所有的控件做个简单的布局:最后,当slider的值改变时,我们用一个label来显示值的变化,同样,用另一个label来显示stepper值的变化,并改变图片的大小:实现效果如下:

  3. preferredFontForTextStyle字体设置之更改

    即:

  4. Swift没有异常处理,遇到功能性错误怎么办?

    本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请发送邮件至dio@foxmail.com举报,一经查实,本站将立刻删除。

  5. 字典实战和UIKit初探

    ios中数组和字典的应用Applicationschedule类别子项类别名称优先级数据包contactsentertainment接触UIKit学习用Swift调用CocoaTouchimportUIKitletcolors=[]varbackView=UIView(frame:CGRectMake(0.0,0.0,320.0,CGFloat(colors.count*50)))backView

  6. swift语言IOS8开发战记21 Core Data2

    上一话中我们简单地介绍了一些coredata的基本知识,这一话我们通过编程来实现coredata的使用。还记得我们在coredata中定义的那个Model么,上面这段代码会加载这个Model。定义完方法之后,我们对coredata的准备都已经完成了。最后强调一点,coredata并不是数据库,它只是一个框架,协助我们进行数据库操作,它并不关心我们把数据存到哪里。

  7. swift语言IOS8开发战记22 Core Data3

    上一话我们定义了与coredata有关的变量和方法,做足了准备工作,这一话我们来试试能不能成功。首先打开上一话中生成的Info类,在其中引用头文件的地方添加一个@objc,不然后面会报错,我也不知道为什么。

  8. swift实战小程序1天气预报

    在有一定swift基础的情况下,让我们来做一些小程序练练手,今天来试试做一个简单地天气预报。然后在btnpressed方法中依旧增加loadWeather方法.在loadWeather方法中加上信息的显示语句:运行一下看看效果,如图:虽然显示出来了,但是我们的text是可编辑状态的,在storyboard中勾选Editable,再次运行:大功告成,而且现在每次单击按钮,就会重新请求天气情况,大家也来试试吧。

  9. 【iOS学习01】swift ? and !  的学习

    如果不初始化就会报错。

  10. swift语言IOS8开发战记23 Core Data4

    接着我们需要把我们的Rest类变成一个被coredata管理的类,点开Rest类,作如下修改:关键字@NSManaged的作用是与实体中对应的属性通信,BinaryData对应的类型是NSData,CoreData没有布尔属性,只能用0和1来区分。进行如下操作,输入类名:建立好之后因为我们之前写的代码有些地方并不适用于coredata,所以编译器会报错,现在来一一解决。

返回
顶部