アドベントペアプロ #2 react-native
ファシリテータ: @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ごとに場合分けしてたりしてなかったりしてて、結局呼び出し側でも場合分けしてるのがむだな感じする。