kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-05-02 14:54:58 +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;