使用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. Xcode入門 推薦

語法入門

有中文PDF和英文原文檔Swift入門 中文 英文原檔

UIkit

這個類將是咱們學習的重點，後面都將用它來構建咱們的應用界面，介紹另一本入門書籍這是一本彎彎同窗寫的，版本雖然是2.0，可是有xcode這種強大的編輯器會提醒你最新的語法是什麼，除了一些關鍵字翻譯的和咱們的習慣不一致，其餘都講的不錯。

Playground

測試JS代碼咱們要麼用node執行測試文件，要麼直接在console中直接測試，在Xcode也提供了這樣的場所，這在咱們一邊看文檔一邊學習時特別有幫助。

1. 在項目中新建文件，選擇Playground文件類型。

1. 左邊編碼後右側及時反饋代碼執行結果，很是適合咱們進行算法測試。

Hello world

Storyboard

在IOS的世界中有兩種構建界面的方式，一種編碼方式，能夠理解爲在JS中用 document.createElement 來建立HTML。
另一種Storyboard了，Storyboard是IOS開發很強大的一個功能，以致於筆者剛開始接觸的時候也被震撼到了，心想這IOS開發也太簡單了吧，就是一個拖字訣啊，可是在和咱們ios的同窗聊過以後才知道業內基本不多使用這個功能，從開發角度是很方便，可是軟件歷來都是一個工程，咱們須要不斷的維護和升級，因此在複雜業務場景下使用編碼構建界面。

界面介紹

建立項目

根據上面的引導就完成了項目的建立,

左側爲項目文件目錄，中間就是Storyboard的工做臺了，右下角則是UI列表。

兩個 Storyboard

注意看上圖中左邊文件中有兩個Storyboard類型的文件。
LaunchScreen.storyboard是開啓APP時的引導界面。
Main.storyboard是應用的內容界面。
這兩個文件也能夠在下圖的地方進行個配置。

Say hello

咱們選中Main.storyboard這個文件，而後在右側找到Label標籤，並將它拖動到界面中，拖動過程當中觸摸板會有震動給你反饋，以下圖。

接下來就很簡單了，咱們雙擊Label標籤而後輸入 Hello world，在按下 cmd + R鍵，咱們的第一個IOS程序就運行起來了。

提示：cmd + 一、二、三、四、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日誌。

如今咱們來解釋一下這其中的關鍵，總共有兩處。

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"

咱們將頭文件引入後再次編譯發現沒有報錯，運行以後結果和預期相符。

結束語

OC的一些語法確實很糾結，我後面後抽空把我理解到的，也是避不開的總結一下再編輯到這章裏，但願對你們有用。