干货 | 携程机票Skip原生跨端框架探究

关注

原创最新推荐文章于 2026-08-05 15:39:26 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

MobaXterm终端工具个人学习版安装包及常用配置备份资源包含 MobaXterm 个人版的安装包以及日常运维常用的基础配置备份文件。适用于网络工程师及运维人员用于日常的服务器管理、SSH 连接及串口调试。压缩包内附带了个人整理的软件使用技巧与配置说明（仅供个人学习参考）。请各位同行下载后注意，技术工具请尽量支持官方正版，本资源仅供个人测试与交流使用，切勿用于商业环境。立即下载

作者简介

Derek Yang，携程机票资深研发经理，专注于iOS开发&跨端技术研究，热衷于新技术探索。

团队热招岗位：资深前端开发工程师

本文介绍Skip这一款新兴的高性能原生跨端开发框架，其通过将Swift和SwiftUI代码智能转换为Kotlin和Jetpack Compose代码，实现Android与iOS双端的高效开发。文章详细解析Skip的架构设计、工具链支持及代码转换策略，并通过实际案例展示其开发流程与技术优势。同时对比Skip与Flutter、React Native等主流框架，突出其在性能、代码共享和开发体验上的卓越表现。

一、Skip工具原理
二、Skip的使用方法
三、与其他跨端技术的对比
四、Skip Demo工程结构分析
五、Skip内部模块
六、使用Skip的注意事项
七、总结

在移动应用开发领域，跨端开发框架一直备受关注。随着Flutter、React Native和Kotlin Multiplatform等方案的普及，开发者能够在不同平台上共享代码，从而提升迭代效率。然而，每种跨端框架都有其优缺点，在开发体验、动态更新、渲染性能和社区生态等方面表现各异。

Skip是由Glimpse I/O, Inc.于2023年推出的一款支持Swift和Kotlin的高性能原生跨端开发框架。该框架旨在显著缩短Android和iOS双端的开发时间，同时降低维护成本。凭借其卓越的技术特性，Skip在跨端开发领域展现了显著优势，包括：

高性能原生体验：通过直接编译为各平台的原生代码，最大限度地减少性能损耗，确保应用运行流畅。
统一的开发体验：支持开发者使用单一代码库构建多端应用，大幅提升开发效率并降低复杂性。
模块化架构：采用灵活的模块化设计，允许开发者按需引入功能模块，优化资源占用和项目结构。

尽管Skip技术理念优势显著，但目前仍无法完全实现将Swift和SwiftUI的功能无缝复刻到Kotlin和Jetpack Compose中。期待后续迭代更新，最终实现跨平台等价转换能力。

本文将介绍Skip这一跨端框架，深入探讨其原理、核心库，并与现有的原生跨端技术（如Kotlin Multiplatform和Compose Multiplatform）进行详细对比。

一、Skip工具原理

Skip的架构图展示了其工作流程：

Skip的核心设计理念是“原生优先”，能够直接利用原生平台的UI组件和系统能力。

与Flutter和React Native不同，Skip不依赖于自绘引擎或JavaScript桥接，也不同于Kotlin Multiplatform将Kotlin代码编译成各个平台的目标代码。Skip的工作原理基于现代编程语言的相似性，通过将Swift和SwiftUI的代码转换为Kotlin和Jetpack Compose的代码，实现跨平台代码共享。

主要特点包括：

代码共享：Skip允许开发者使用Kotlin（针对Android）和Swift（针对iOS）编写共享的业务逻辑代码。通过一种轻量级的抽象层，Skip将这些代码转换为原生平台的实现，从而避免了跨平台框架常见的性能损耗。

原生UI组件：Skip不引入额外的UI框架，而是直接使用Android的Jetpack Compose和iOS的SwiftUI。这意味着开发者可以享受到原生UI的高性能和流畅体验，同时减少学习成本。

状态管理：Skip提供了一套轻量级的状态管理机制，支持在共享代码中定义和管理应用的状态，并通过高效的同步机制确保状态变化能够实时反映到原生UI层。

工具链支持：Skip提供了完整的工具链支持，包括代码生成、调试工具和构建脚本，帮助开发者快速上手并优化开发流程。

实际运行效果：不仅逻辑部分可共享，UI部分也可以做到一码双端。

二、Skip的使用方法

2.1 环境搭建

Skip的环境初始化配置非常简单：

1）安装Kotlin和Swift开发环境

2）通过Homebrew安装Skip CLI工具：

brew install skip-dev/tap/skip

3）初始化一个新的Skip项目：

skip init MyApp

2.2 编写共享代码

在Skip项目中，共享代码位于shared目录下。开发者可以使用Kotlin或Swift编写业务逻辑，例如网络请求、数据存储等。

class MyApp {
    fun greet(): String {
        return "Hello, Skip!"
    }
}

2.3 实现原生UI

在Android和iOS项目中，分别使用Jetpack Compose和SwiftUI实现UI层，并调用共享逻辑代码。

Swift编写共享代码

public struct RootView: View {
    public init() {}


    public var body: some View {
        ContentView()
            .task {
                logger.log("Welcome to Skip on \(androidSDK != nil ? "Android" : "Darwin")!")
                logger.warning("Skip app logs are viewable in the Xcode console for iOS; Android logs can be viewed in Studio or using adb logcat")
            }
    }
}


public struct ContentView: View {
    @AppStorage("tab") var tab = ContentTab.welcome11
    @State var viewModel = ViewModel()
    @State var appearance = ""


    public init() {}


    public var body: some View {
        TabView(selection: $tab) {
            NavigationStack {
                WelcomeView()
            }
            .tabItem { Label("Welcome1234885z211", systemImage: "heart.fill") }
            .tag(ContentTab.welcome11)


            NavigationStack {
                ItemListView()
                    .navigationTitle(Text("\(viewModel.items.count) Items"))
            }
            .tabItem { Label("Home2", systemImage: "house.fill") }
            .tag(ContentTab.home22)


            NavigationStack {
                SettingsView(appearance: $appearance)
                    .navigationTitle("Settings")
            }
            .tabItem { Label("Settings3", systemImage: "gearshape.fill") }
            .tag(ContentTab.settings33)
        }
        .environment(viewModel)
        .preferredColorScheme(appearance == "dark" ? .dark : appearance == "light" ? .light : nil)
    }
}

iOS接入

#if !SKIP
public protocol SwiftToAndroidApp: App {}


public extension SwiftToAndroidApp {
    var body: some Scene {
        WindowGroup {
            RootView()
        }
    }
}
#endif

Android接入

open class MainActivity: AppCompatActivity {
    constructor() {}


    override fun onCreate(savedInstanceState: android.os.Bundle?) {
        super.onCreate(savedInstanceState)
        logger.info("starting activity")
        UIApplication.launch(this)
        enableEdgeToEdge()


        setContent {
            val saveableStateHolder = rememberSaveableStateHolder()
            saveableStateHolder.SaveableStateProvider(true) {
                PresentationRootView(ComposeContext())
                SideEffect { saveableStateHolder.removeState(true) }
            }
        }
    }
}


@Composable
internal fun PresentationRootView(context: ComposeContext) {
    val colorScheme = if (isSystemInDarkTheme()) ColorScheme.dark else ColorScheme.light
    PresentationRoot(defaultColorScheme = colorScheme, context = context) { ctx ->
        val contentContext = ctx.content()
        Box(modifier = ctx.modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            RootView().Compose(context = contentContext)
        }
    }
}

2.4 构建和运行

使用Skip CLI工具构建并运行项目：

skip build
skip run

2.5 调试工具

Skip基于Swift语言生成Kotlin和Jetpack Compose的代码产物，因此调试沿用iOS和Android的开发工具，即Xcode和Android Studio。这相较于其他跨端框架对移动端原生开发者非常友好，尤其对于KMP的开发者。

三、与其他跨端技术的对比

3.1 技术对比

Skip与Flutter、React Native、Kotlin Multiplatform和Compose Multiplatform的详细对比：

3.2 Binary Size对比

以Release版本验证数据对比，Skip的生成产物体积最小，非常适合对安装包大小敏感的应用场景。

3.3 运行性能Benchmark对比

Skip在UI渲染性能、启动时间和内存占用方面表现出色，相较于其他跨端框架具有显著优势。

官方对比数据，对使用Skip进行iOS和Android双平台开发与其他一些主流跨平台应用程序构建方案进行比较。

各种主流跨平台开发框架的底层技术方案：

四、Skip Demo工程结构分析

Skip的工程大致可分为以下四大模块：

Shared Module：包含共享的业务逻辑代码，使用Kotlin或Swift编写。
Android Module：使用Jetpack Compose实现UI层，并调用共享代码。
iOS Module：使用SwiftUI实现UI层，并调用共享代码。
Skip Toolchain：提供代码生成、构建和调试支持。

SkipDemo实际工程结构如图：

Xcode对SkipDemo工程编译生成的Android源码和依赖都在skipstone文件夹下，开发人员编写的代码转译产物在SkipDemo中，其依赖项和其同级，此代码可以单独用AS直接打开运行。具体如下：

针对SkipDemo，也可直接通过Xcode来运行，这是因为在初始化SkipDemo项目时，工程配置中已经包含了构建和运行Android的脚本。

生成的Android工程分析

Android入口外壳app工程，在Activity的onCreate中，通过Compose的标准方式setContent来构建视图。关键点在于，SwiftUI使用对象作为界面元素，而Jetpack Compose需要将界面元素转换为@Composable函数。

实现策略详见：Skip UI Implementation Strategy

在转换代码中，SwiftUI的每个View都有一个body，这里返回的是SwiftUI的页面元素，转换之后需要提供的是可以调用的@Composable函数，这里包装了一层ComposeBuilder用于执行Compose方法返回@Composable函数的结果用于展示。

SwiftUI转Compose的示例：

SwiftUI

struct V: View {
    let isHello: Bool


    var body: some View {
        if isHello {
            Text("Hello!")
        } else {
            Text("Goodbye!")
        }
    }
}

Compose

internal class V: View {
    internal val isHello: Boolean


    override fun body(): View {
        return ComposeBuilder { composectx: ComposeContext ->
            if (isHello) {
                Text(LocalizedStringKey(stringLiteral = "Hello!")).Compose(composectx)
            } else {
                Text(LocalizedStringKey(stringLiteral = "Goodbye!")).Compose(composectx)
            }
            ComposeResult.ok
        }
    }


    constructor(isHello: Boolean) {
        this.isHello = isHello
    }
}

SkipUI的工作原理：