kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-05 09:29:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add margin auto support to react native

Browse Source 
Summary:
This diff adds margin:auto (https://drafts.csswg.org/css-flexbox-1/#auto-margins) support to React Native. This enables layout not previously supported without inserting empty 'spacer' views. See below Playground for usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white'}}>
        <View style={{width: 100, height: 100, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 'auto', backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611753

fbshipit-source-id: e78335565c193f7fb263129a638b444715ba5ab0
This commit is contained in:
Emil Sjolander
2017-03-01 09:12:45 -08:00
committed by Facebook Github Bot
parent fb266fcaad
commit cc275557be
4 changed files with 80 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,6 +74,9 @@ public class LayoutShadowNode extends ReactShadowNode {
case UNDEFINED:
setStyleWidth(mTempYogaValue.value);
break;
case AUTO:
setStyleWidthAuto();
break;
case PERCENT:
setStyleWidthPercent(mTempYogaValue.value);
break;
@@ -134,6 +137,9 @@ public class LayoutShadowNode extends ReactShadowNode {
case UNDEFINED:
setStyleHeight(mTempYogaValue.value);
break;
case AUTO:
setStyleHeightAuto();
break;
case PERCENT:
setStyleHeightPercent(mTempYogaValue.value);
break;
@@ -218,6 +224,9 @@ public class LayoutShadowNode extends ReactShadowNode {
case UNDEFINED:
setFlexBasis(mTempYogaValue.value);
break;
case AUTO:
setFlexBasisAuto();
break;
case PERCENT:
setFlexBasisPercent(mTempYogaValue.value);
break;
@@ -312,6 +321,9 @@ public class LayoutShadowNode extends ReactShadowNode {
case UNDEFINED:
setMargin(ViewProps.PADDING_MARGIN_SPACING_TYPES[index], mTempYogaValue.value);
break;
case AUTO:
setMarginAuto(ViewProps.PADDING_MARGIN_SPACING_TYPES[index]);
break;
case PERCENT:
setMarginPercent(ViewProps.PADDING_MARGIN_SPACING_TYPES[index], mTempYogaValue.value);
break;

16
ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java
View File

@@ -554,6 +554,10 @@ public class ReactShadowNode {
mYogaNode.setWidthPercent(percent);
}
public void setStyleWidthAuto() {
mYogaNode.setWidthAuto();
}
public void setStyleMinWidth(float widthPx) {
mYogaNode.setMinWidth(widthPx);
}
@@ -582,6 +586,10 @@ public class ReactShadowNode {
mYogaNode.setHeightPercent(percent);
}
public void setStyleHeightAuto() {
mYogaNode.setHeightAuto();
}
public void setStyleMinHeight(float widthPx) {
mYogaNode.setMinHeight(widthPx);
}
@@ -614,6 +622,10 @@ public class ReactShadowNode {
mYogaNode.setFlexBasis(flexBasis);
}
public void setFlexBasisAuto() {
mYogaNode.setFlexBasisAuto();
}
public void setFlexBasisPercent(float percent) {
mYogaNode.setFlexBasisPercent(percent);
}
@@ -654,6 +666,10 @@ public class ReactShadowNode {
mYogaNode.setMarginPercent(YogaEdge.fromInt(spacingType), percent);
}
public void setMarginAuto(int spacingType) {
mYogaNode.setMarginAuto(YogaEdge.fromInt(spacingType));
}
public final float getPadding(int spacingType) {
return mYogaNode.getLayoutPadding(YogaEdge.fromInt(spacingType));
}