アドベントペアプロ #2 react-native

2018/12/04のアドベントペアプロの議事録

ファシリテータ: @ggtmtmgg セクリタリ: @ggtmtmgg 参加者: @saitoxu レポジトリ: https://github.com/facebook/react-native Issue: https://github.com/facebook/react-native/issues/20410

Yogaメインルーチンの整理

// STEP 1: CALCULATE VALUES FOR REMAINDER OF ALGORITHM
// STEP 2: DETERMINE AVAILABLE SIZE IN MAIN AND CROSS DIRECTIONS
// STEP 3: DETERMINE FLEX BASIS FOR EACH ITEM
// STEP 4: COLLECT FLEX ITEMS INTO FLEX LINES
// STEP 5: RESOLVING FLEXIBLE LENGTHS ON MAIN AXIS
// STEP 6: MAIN-AXIS JUSTIFICATION & CROSS-AXIS SIZE DETERMINATION
// STEP 7: CROSS-AXIS ALIGNMENT
// STEP 8: MULTI-LINE CONTENT ALIGNMENT
// STEP 9: COMPUTING FINAL DIMENSIONS
// STEP 10: SIZING AND POSITIONING ABSOLUTE CHILDREN

// STEP 11: SETTING TRAILING POSITIONS FOR CHILDREN

用語の共通認識を取る

MAIN DIRECTIONS: flexboxのdirection
MAIN-AXIS: direction水平軸
CROSS-AXIS: direction直行軸
FLEX BASIS: direction方向の要素の初期の長さ
FLEXIBLE LENGTHS: direction方向の要素の長さ
JUSTIFICATION: 最適化(?)
COMPUTING FINAL DIMENSIONS: 最終的なサイズを確定する
TRAILING POSITIONS: (多分)要素の後ろ側のスペースの大きさ(自信度20%)
devidation: 違い・偏差

Yoga.cppのYGNodelayoutImpl関数のSTEP1の手前の前処理

概要: Margin, Boarder, Padding, コメントアウトで普通のアルゴリズムとの差異・引数・詳細が述べられている。

Layout Modeごとに挙動が変わる。
YGMesuerModeUndefined: max content
YGMeasuerModeExactly: fill available
YGMeasuerModeAtMost: fit content
RowDirection: 横の向き
ColumnDirection: 縦の向き

max-content: The intrinsic preferred width.
resolution:
RTL: Right To Left, アラビア語とかで使う概念
L2738: 親のnodeのdirectionをset(inherit or ltr or rtl)
L2746-2784は上下左右のマージン,ボーダー,パディングを設定 ※RNのバージョンによってやや行番号がずれているので後で最新化する BoundAxis:
Measure: 長さを図る関数
YGNodeWithMeasureFuncSetMeasuredDimensions: MesureFuncを適用して計算し直したDimensionsをnodeにセットする
node->setLayoutMesuredDimension: MesuredDimensionをセットする
node->getMeasure(): MeasureFuncを返す関数。RCTShadowViewMeasure, RCTBaseTextInputShadowViewMeasure, RCTTextShadowViewMeasureという実態だったりする。 MeasureFuncをもつShadowViewは意外と少なそう。TextとTextInput以外にMeasureFuncがSetされるシチュエーションは少なさそう。 performLayout: specifies whether the caller is interested in just the dimentions of the node or it requires the entire node and its subtree to be layed out(with final positions) perform:

// setLayoutPadding(値, 位置): paddingをsetする
// YGUnwrapFloatOptional(Optionalな変数): Optional型の変数から値を取り出す
// node->getTrailingPadding(flexColumnDirection, ownerWidth): 末尾のpadding値を計算する
// YGEdgeBottom: enum
  node->setLayoutPadding(
      YGUnwrapFloatOptional(
          node->getTrailingPadding(flexColumnDirection, ownerWidth)),
      YGEdgeBottom);

cppのtypedefで関数を定義するときの書き方 typedef 返り値の型 (*関数名)(引数の型);

typedef YGSize (*YGMeasureFunc)(
    YGNodeRef node,
    float width,
    YGMeasureMode widthMode,
    float height,
    YGMeasureMode heightMode);

そしてLayoutを計算する準備が整った。

メモ

CSSのmax content, fill available, fit contentの違いが分からない
cppのexplicit: コンストラクタにつける。いまいちよくわからない。
引数の暗黙的型変換を防ぐためのもののよう http://starpentagon.net/life/2017/01/explicit_constructor RCTShadowViewMeasureとかの中でYGMeasureModeごとに場合分けしてたりしてなかったりしてて、結局呼び出し側でも場合分けしてるのがむだな感じする。

参考