Deep Dive Into Rn布局渲染的核心原理

Yoga

Review

  1. 2024-10-02 10:03

[!Summary]

  1. 通过 Yoga(布局引擎) 实现布局的位置和大小计算
  2. 将布局信息传递给原生平台的渲染引擎 (UIKit - iOS, View - Android) 进行渲染

一、Introduction #

  • Yoga 是一个跨平台的布局引擎,由 Facebook 开源。
  • 它实现了 Flexbox 布局模式,提供了一种灵活且强大的布局方式。
  • Yoga 并不是直接负责将布局渲染到屏幕上,而是计算出各个组件的布局位置和大小,然后将这些信息传递给原生平台的渲染引擎。

官方布局引擎

  • UIStackViews (iOS)
  • Auto Layout (iOS)
  • FlexLayout (Yoga)
  • LayoutKit
  • ManualLayout
  • PinLayout
  • NKFrameLayoutKit
  • NotAutoLayout

Reference #