kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-14 23:18:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

BREAKING - Fix unconstraint sizing in main axis

Browse Source 
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this.

Reviewed By: astreet

Differential Revision: D3855801

fbshipit-source-id: 6077b0bcb68fe5ddd4aa22926acab40ff4d83949
This commit is contained in:
Emil Sjolander
2016-09-14 09:00:26 -07:00
committed by Facebook Github Bot 5
parent 8eee79b5d1
commit 1f9c9ecb4b
11 changed files with 55 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ReactAndroid/src/main/java/com/facebook/csslayout/CSSOverflow.java
View File

@@ -12,4 +12,5 @@ package com.facebook.csslayout;
public enum CSSOverflow {
VISIBLE,
HIDDEN,
SCROLL,
}

20
ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java
View File

@@ -715,19 +715,17 @@ public class LayoutEngine {
childHeightMeasureMode = CSSMeasureMode.EXACTLY;
}
// According to the spec, if the main size is not definite and the
// child's inline axis is parallel to the main axis (i.e. it's
// horizontal), the child should be sized using "UNDEFINED" in
// the main size. Otherwise use "AT_MOST" in the cross axis.
if (!isMainAxisRow && Float.isNaN(childWidth) && !Float.isNaN(availableInnerWidth)) {
childWidth = availableInnerWidth;
childWidthMeasureMode = CSSMeasureMode.AT_MOST;
}
// The W3C spec doesn't say anything about the 'overflow' property,
// but all major browsers appear to implement the following logic.
if (node.style.overflow == CSSOverflow.HIDDEN) {
if (isMainAxisRow && Float.isNaN(childHeight) && !Float.isNaN(availableInnerHeight)) {
if ((!isMainAxisRow && node.style.overflow == CSSOverflow.SCROLL) || node.style.overflow != CSSOverflow.SCROLL) {
if (Float.isNaN(childWidth) && !Float.isNaN(availableInnerWidth)) {
childWidth = availableInnerWidth;
childWidthMeasureMode = CSSMeasureMode.AT_MOST;
}
}
if ((isMainAxisRow && node.style.overflow == CSSOverflow.SCROLL) || node.style.overflow != CSSOverflow.SCROLL) {
if (Float.isNaN(childHeight) && !Float.isNaN(availableInnerHeight)) {
childHeight = availableInnerHeight;
childHeightMeasureMode = CSSMeasureMode.AT_MOST;
}

7
ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java
View File

@@ -10,6 +10,7 @@ import com.facebook.csslayout.CSSAlign;
import com.facebook.csslayout.CSSConstants;
import com.facebook.csslayout.CSSFlexDirection;
import com.facebook.csslayout.CSSJustify;
import com.facebook.csslayout.CSSOverflow;
import com.facebook.csslayout.CSSPositionType;
import com.facebook.csslayout.CSSWrap;
import com.facebook.react.uimanager.annotations.ReactProp;
@@ -102,6 +103,12 @@ public class LayoutShadowNode extends ReactShadowNode {
justifyContent.toUpperCase(Locale.US).replace("-", "_")));
}
@ReactProp(name = ViewProps.OVERFLOW)
public void setOverflow(@Nullable String overflow) {
setOverflow(overflow == null ? CSSOverflow.VISIBLE : CSSOverflow.valueOf(
overflow.toUpperCase(Locale.US).replace("-", "_")));
}
@ReactPropGroup(names = {
ViewProps.MARGIN,
ViewProps.MARGIN_VERTICAL,

2
ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
View File

@@ -26,6 +26,7 @@ public class ViewProps {
// !!! Keep in sync with LAYOUT_ONLY_PROPS below
public static final String ALIGN_ITEMS = "alignItems";
public static final String ALIGN_SELF = "alignSelf";
public static final String OVERFLOW = "overflow";
public static final String BOTTOM = "bottom";
public static final String COLLAPSABLE = "collapsable";
public static final String FLEX = "flex";
@@ -113,6 +114,7 @@ public class ViewProps {
FLEX_DIRECTION,
FLEX_WRAP,
JUSTIFY_CONTENT,
OVERFLOW,
/* position */
POSITION,